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

Question

I have a React application where a react-leaflet#2.7.0 + react-leaflet-draw#0.19.0 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!