"Map container is being reused by another instance" when using the new React Activity component

[tomerzcod7]

Expected behavior

React new Activity component should be perfect to offload the map for lower priority rendering and preserving state. However it seems like the MapContainer implementation does not support it properly

https://react.dev/reference/react/Activity

Actual behavior

You get the following error in the console: "Map container is being reused by another instance"

Steps to reproduce

Using the Activity component and toggle between hiding and viewing the map container:

<Activity mode={activeTab === 'map' ? 'visible' : 'hidden'}>
  <MapContainer center={center} zoom={zoom}>
    <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
  </MapContainer>
</Activity>

[Pedro-phd]

same error

[gabrielbryk]

same here

[AlejandroRM-DEV]

+1

[vanwalj]

Same here, did someone found a workaround for this?

[mariio46]

+1

[kaeon]

same problem

[maxmarchuk]

From the documentation: https://react-leaflet.js.org/docs/start-introduction/#limitations

React's Activity component executes effects while retaining the map container element, making it incompatible with how React Leaflet works. A unique key property can be set on a MapContainer element to reset it.