Me gustaría preguntar si estoy usando el mapa de React Leaflet ( https://react-leaflet.js.org/ ), pero ¿cómo agrego el botón de la Galería de mapas base al mapa? como este ejemplo del botón Galería de mapa base en la imagen que marqué con una flecha roja.

Y fotos en el enlace:
Ejemplo de una flecha Galería de mapas base

Un ejemplo en mi mapa donde quiero agregar la Galería de mapas base

Y cómo mostrar el botón de la Galería de mapas base, ¿dónde lo guardas de mi codificación?

 import { React, useState, useEffect } from 'react' import { LayersControl, MapContainer, TileLayer, Marker, Popup, useMapEvents, } from 'react-leaflet' import L from 'leaflet' import 'leaflet-easybutton/src/easy-button' import 'leaflet-easybutton/src/easy-button.css' import 'font-awesome/css/font-awesome.min.css' const { BaseLayer } = LayersControl; export default function MyMaps() { const [map, setMap] = useState(null); const [position, setPosition] = useState(null); useEffect(() => { if (!map) return; L.easyButton("fa-map-marker", () => { map.locate().on("locationfound", function (e) { setPosition(e.latlng); map.flyTo(e.latlng, map.getZoom()); }); }).addTo(map); }, [map]); return ( <div className="flex ml-auto"> <div className="w-4/5"> <MapContainer center={[51.505, -0.09]} zoom={20} style={{ height: "100vh" }} whenCreated={setMap} > <LayersControl> <BaseLayer checked name="OpenStreetMap"> <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png " /> </BaseLayer> </LayersControl> </MapContainer> </div> </div> ); }