如何通过点击leaflet js地图动态添加标记

Question

我想通过使用 react-leaflet 在地图上单击来动态添加标记。

在这段代码中，我应该做些什么来添加该功能。

       <MapContainer
          center={position}
          zoom={8}
          scrollWheelZoom={true}
          style={{ height: "100vh", width: "100%" }}
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>       contributors'
        url="https://api.maptiler.com/maps/basic-v2/256/{z}/{x}/{y}.png?key=INhIiarNdRvjpXL4KRsE"
      />
    </MapContainer>