React Leaflet 地図の境界線（見える範囲）を指定する方法

npx create-react-app

npm install leaflet react-leaflet

src //
  |-- index.js
  |-- index.css
  |-- App.css
  `-- App.js

import { MapContainer, TileLayer, useMapEvent } from "react-leaflet";
import L from 'leaflet'
import "leaflet/dist/leaflet.css";
import "./App.css";
const center = [35.3628, 138.7307];

function App() {
  var northEast = L.latLng(50.56928286558243, 149.89746093750003),
    southWest = L.latLng(17.09879223767869, 126.29882812500001),
    bounds = L.latLngBounds(northEast, southWest);

    const Event = () => {
      const map = useMapEvent('click', (location) => {
        console.log(map.getBounds())
      })
    }
  return (
    <MapContainer center={center} maxBounds={bounds} zoom={5} zoomControl={false} id="map">
      <TileLayer
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Event />
    </MapContainer>
  );
}

export default App;