leaflet - 作成後にポリゴンを編集する方法

Question

ポリゴンを作成した後、ポリゴンの編集がうまくいかないようです。

コード :

function MyMap() {
  const [coords, setCoords] = useState([]);

  // This function runs after the annotation is drawn
  const created = (e) => {
    const coordsList = e.layer.editing.latlngs[0][0];
    console.log("coordsList:", coordsList);

    const newArr = coordsList.map((coord) => ({
      Lat: coord.lat,
      Long: coord.lng,
    }));
    setCoords(newArr);
  };
    
  return (
    <div className="mapview">
      <div className="myMap">
        <Map center={[0, 0]} zoom={1}>
          <FeatureGroup>
            <EditControl
              position="topright"
              draw={{
                rectangle: false,
                circle: false,
                circlemarker: false,
                polyline: false,
              }}
              onCreated={created}
            />
          </FeatureGroup>
          <ImageOverlay
                bounds={[
                  [0, 0],
                  [256, 256],
                ]}
                url={`data:image/png;base64,${image}`}
              />
                { coords.map((poly) => {
                  return (
                      <Polygon positions={poly.myCoords}>
                  }
        </Map>
      </div>
    </div>
  );
}

注釈が作成されたら、右上の編集アイコンをクリックして編集しようとします。残念ながら、編集ボタンが機能しないか、編集をトリガーしていないようです。