How to use the react-leaflet.useLeaflet function in react-leaflet

export default function Display(p) {
  const bounds = useSelector(selectModificationBounds)
  const leaflet = useLeaflet()

  // Zoom to bounds on bounds change
  useOnMount(() => {
    if (bounds) leaflet.map.fitBounds(bounds)
  })

  const m = p.modification
  switch (m.type) {
    case C.REMOVE_TRIPS:
      return (

export default function EsriDynamic(props) {
    const leaflet = useLeaflet();
    return ;
}

export default function Wms(props) {
    const leaflet = useLeaflet();
    return ;
}

export default function EsriTiled(props) {
    const leaflet = useLeaflet();
    return ;
}

export default function EsriFeature(props) {
    const leaflet = useLeaflet();
    return ;
}

function Location(props: LocationProps) {
  const { map } = useLeaflet();

  useEffect(() => {
    if (map) {
      map.panTo([props.location.latitude, props.location.longitude]);
    }
  }, [props.location, map]);

  return <>;
}

export default function EsriBasemap({ layer, labels, ...rest }) {
    const leaflet = useLeaflet(),
        props = {
            ...rest,
            layer,
            leaflet
        };
    if (labels) {
        const labelProps = {
            ...props,
            layer: props.layer + 'Labels'
        };
        return (
            
                
                
            
        );

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