react-leaflet-draw - onEditStart/Stop events cumulates when trying to edit multiple featureGroups

Question

I have a React application where a [email protected] + [email protected] map is displaying multiple FeatureGroup components containing polygons. On the right end side of the app is a clickable list of the feature groups names. The groups can be selectively "activated" by clicking the names, so if a feature group is active, the EditControl therein is rendered. Only one group can be active at a time.

My problem

when I switch from one group to another and then click the edit button in EditControl, the onEditStart/Stop events of the previously active group still fire, along with the new ones. The more I switch between groups, the more events are fired.

Update:

The issue seems to be that EditControl is never unmounted, even if upon the parent state change it doesn't get rendered. If I add a random key prop to it, the issue is resolved, but then other issues occur.

I don't yet have a minimal code example to share, but to give you an idea of the implementation here is a schema:

<App>
   <Map>
     <MapContent id="foo">
      <FeatureGroup>
        <EditControl />
      </FeatureGroup>
     </MapContent>
     <MapContent id="bar">
      <FeatureGroup>
        <EditControl />
      </FeatureGroup>
     </MapContent>
   </Map>
   <GroupSelector />
</App>

Except App (root component), MapContent (very basic wrapper: checks if the group is active) and GroupSelector (clickable list), all other components are from react-leaflet and react-leaflet-draw.

Flow On click, GroupSelector updates the state of App to set an activeGroupID (i.e. "foo") and MapContent will render its EditControl only if its id matches the activeGroupID

I hope this description makes sense. Any help would be greatly appreciated!