How to use the @wq/react.usePlugin function in @wq/react

export default function App() {
    const { theme } = usePlugin('material').config;
    return (
        
            
            
        
    );
}

export default function Map({ bounds, children, mapProps }) {
    const { ready } = usePlugin('map'),
        Root = useMemo(() => ReactMapboxGl(mapProps || {}), [mapProps]),
        fitBounds = useMemo(() => {
            const [[ymin, xmin], [ymax, xmax]] = bounds;
            return [[xmin, ymin], [xmax, ymax]];
        }, [bounds]),
        state = useMapState(),
        basemap = state && state.basemaps.filter(basemap => basemap.active)[0];

    let style;
    if (basemap && basemap.type === 'vector-tile') {
        style = basemap.url;
    } else {
        style = null;
    }

    return (

function Ready() {
    const { ready } = usePlugin('map') || {},
        { map } = useLeaflet();
    useEffect(() => {
        ready && map && ready(map);
    }, [ready, map]);
    return null;
}

export function useBasemapComponents() {
    return paramCaseMap(usePlugin('map').config.basemaps);
}

export function useMapConfig() {
    const { config } = usePlugin('map'),
        routeInfo = useRouteInfo(),
        context = useRenderContext();

    return routeMapConf(config, routeInfo, context);
}

export function useOverlayComponents() {
    return paramCaseMap(usePlugin('map').config.overlays);
}