React Leaflet マップ上のマーカーアイコンをクリックしてズームさせる方法

npx create-react-app

npm install leaflet react-leaflet

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

import {
  MapContainer,
  TileLayer,
  useMap,
  Marker,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "./App.css";
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

//defaultMarker
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconUrl: icon,
  shadowUrl: iconShadow,
});

const center = [35.3628, 138.7307];

const ZoomMarker = () => {
  const map = useMap();

  const zoom = (e) => {
    map.setView([e.latlng.lat, e.latlng.lng], 12);
  };

  return (
    <Marker
      position={center}
      eventHandlers={{
        click: zoom,
      }}
    />
  );
};

function App() {
  return (
    <MapContainer center={center} zoom={10} zoomControl={true} id="map">
      <TileLayer
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <ZoomMarker />
    </MapContainer>22
  );
}

export default App;