Как выбрать область в листовке реакции

Я использую реагирующую листовку для взаимодействия с картой листовки. Теперь я хочу использовать плагин листовки под названием leaflet-area-select, чтобы выбрать область на карте и получить текущую длинную широту выбранного прямоугольника. Однако это плагин для листовок, и его нельзя использовать в реагирующих листовках. Как я могу использовать этот плагин? Или вы знаете какие-нибудь библиотеки, которые могут выбирать области из листовки? Большое спасибо!

Выберите код города (листовка-зона-выбор):

let map = new L.Map('map', {
  selectArea: true // will enable it by default
});
 
// or
map.selectArea.enable();
 
map.on('areaselected', (e) => {
  console.info(e.bounds.toBBoxString()); // lon, lat, lon, lat
});
 
// You can restrict selection area like this:
const bounds = map.getBounds().pad(-0.25); // save current map bounds as restriction area
// check restricted area on start and move
map.selectArea.setValidate((layerPoint) => {
  return bounds.contains(
    this._map.layerPointToLatLng(layerPoint)
  );
});
 
// now switch it off
map.selectArea.setValidate();

Мой код:

export default function Home(){
    return(
        <>
        <Header/>
            <MapContainer center = {[10.7743, 106.6669]} zoom = {6}>
          <TileLayer
            attribution='&copy; <a href = "http://osm.org/copyright">OpenStreetMap</a> contributors'
            url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          {/* <GeoJSON
          style = {this.countryStyle}
          data = {polygonData.features}
          onEachFeature = {this.onEachContry}
          
          /> */}
        </MapContainer>
        </>
    )
}

🤔 А знаете ли вы, что...
JavaScript поддерживает работу с куки и хранилищем веб-браузера для сохранения данных на клиентской стороне.