shape duplication on leaflet-geoman react

Question

I building a react app exactly like geojson.io the only problem is when I try to change the coordinates of a shape in live Script section (on the right side of screen) instead of changing the shape it creates a new shape based on the changes made in live script. note : I'm using redux toolkit for context and react-leaflet and leaflet-geoman for creating map and controle section for creating and editing shapes on the map.

export const Geoman = () => {
  const context = useLeafletContext();
  
  let geojsonLayerRef = useRef(null);
  let jsoni = "";

  const dispatch = useDispatch();
  const scriptData = useSelector((state) => state.script.scriptData);

  useEffect(() => {

    const leafletContainer = context.layerContainer || context.map;
    leafletContainer.pm.addControls({
      drawMarker: false,
    });
    
    leafletContainer.pm.setGlobalOptions({ pmIgnore: false });
    leafletContainer.on("pm:create", (e) => {
      if (e.layer && e.layer.pm) {
        let shape = e;
        jsoni = JSON.stringify(leafletContainer.pm.getGeomanLayers(true).toGeoJSON())
        fetchi(jsoni)
        leafletContainer.pm
          .getGeomanLayers()
          .map((layer, index) => layer.bindPopup(`I am figure N° ${index}`))
          shape.layer.pm.enable();
          shape.layer.on("pm:edit", (e) => {
          const event = e;
          jsoni = JSON.stringify(leafletContainer.pm.getGeomanLayers(true).toGeoJSON())
          fetchi(jsoni)
        });
      }
    });

    if (geojsonLayerRef.current) {
      leafletContainer.removeLayer(geojsonLayerRef.current);
    }

    const geojsonLayer = L.geoJSON(scriptData).addTo(leafletContainer);
    geojsonLayer.eachLayer((layer) => {
      layer.pm.enable();
      layer.on("pm:edit", (e) => {
        const event = e;
        jsoni = JSON.stringify(leafletContainer.pm.getGeomanLayers(true).toGeoJSON());
        fetchi(jsoni);
      });
    });
    geojsonLayerRef.current = geojsonLayer;

    leafletContainer.on("pm:remove", (e) => {
      console.log("object removed");
      jsoni = JSON.stringify(leafletContainer.pm.getGeomanLayers(true).toGeoJSON())
      fetchi(jsoni)
    });

    return () => {
      leafletContainer.off("pm:edit")
      leafletContainer.off("pm:create")
      leafletContainer.pm.removeControls();
      leafletContainer.pm.setGlobalOptions({ pmIgnore: true });
    };
  }, [context, scriptData]);
  
  function fetchi(data) {
    if(data.length !== 0) {
      dispatch(scriptAction.setMapData(JSON.parse(data)));
    }
  }
  

  return null;
};

I did write this section for working around this problem but it doesn't work :

    if (geojsonLayerRef.current) {
      leafletContainer.removeLayer(geojsonLayerRef.current);
    }

    const geojsonLayer = L.geoJSON(scriptData).addTo(leafletContainer);
    geojsonLayer.eachLayer((layer) => {
      layer.pm.enable();
      layer.on("pm:edit", (e) => {
        const event = e;
        jsoni = JSON.stringify(leafletContainer.pm.getGeomanLayers(true).toGeoJSON());
        fetchi(jsoni);
      });
    });
    geojsonLayerRef.current = geojsonLayer;

thanks in advance