OnCreate Handler is triggered multiple times after creating the first Shape

Dear Derick, I am experiencing a strange and for me unwanted issue that I'd like to understand better and debug deeper.

Background: I am using Leaflet and Geoman to draw Geojson-Element on the map and sending them after creation via an API-Call to the server to do stuff there. After creating one element, the Geoman-Controls are not rendered until the user clicks a button to add another Shape. After drawing a shape, the "Geoman-Cache" should be cleared.

Bug description: For the first element it works as expected. When I'm adding another element, the onCreate-Handler ist executed multiple times with the same Layer Information.

Here is a screenshot of the console. The first element triggers once. Every next element triggers multiple times.

Reproduction of this bug: To reproduce this bug, this example can be used. I removed all handlers except onCreate.

  const handleChange = (e: any) => {

    console.debug('handleCreate at ' + new Date().toISOString(), e);

    const newGeo: FeatureCollection = {
      type: 'FeatureCollection',
      features: [],
    }
    const layers = ref.current?.getLayers()
    if (layers) {
      layers.forEach((layer) => {
        if (layer instanceof L.Circle || layer instanceof L.CircleMarker) {
          const { lat, lng } = layer.getLatLng()
          newGeo.features.push({
            type: 'Feature',
            properties: {
              radius: layer.getRadius(),
            },
            geometry: {
              type: 'Point',
              coordinates: [lng, lat],
            },
          })
        } else if (
          layer instanceof L.Marker ||
          layer instanceof L.Polygon ||
          layer instanceof L.Rectangle ||
          layer instanceof L.Polyline
        ) {
          newGeo.features.push(layer.toGeoJSON())
        }
      })
    }
    setGeojson(newGeo)
  }

  return (
    <FeatureGroup ref={ref}>
      <GeomanControls
        options={{
          position: 'topleft',
          drawText: false,
        }}
        globalOptions={{
          continueDrawing: true,
          editable: false,
        }}
        // onMount={() => L.PM.setOptIn(true)}
        // onUnmount={() => L.PM.setOptIn(false)}
        eventDebugFn={console.log}
        onCreate={handleChange}
      />
    </FeatureGroup>
)

Using the onCreate handler of <GeomanControls> creating the first Shape (e.g. a polygon), the handler will be called once. Creating the next element, the handler will be called twice, but with the same information.

After debugging some more time, I found that when I remove setGeojson(newGeo) it triggers only once. It seems, that changes in the geojson also trigger geoman-handlers somehow.

Side Note: In our implementation it triggers the onChange handler as much as I have added Shapes. So, on adding the 30th shape, the handler will be executed 30 times.

Can you give me an idea, further information or a link how to debug and understand this issue better? Possibly there is a conceptual misunderstanding from my side here.

My main questions here are:

How can I prevent to trigger the onChange Handler multiple times? How it's possible in my implementation that onChange is triggered "the total number of added shapes" times? Is is possible to debug this more deeply?

I appreciate a lot your help here :). Best regards, Ralf

TurtIeSocks / react-leaflet-geoman

OnCreate Handler is triggered multiple times after creating the first Shape #13