useLeafletContext() can only be used in a descendant of <MapContainer>

Solution 1:

In the 3.2.0 release of react-leaflet, the author of the library started using the nullish coalescing operator which as I understand it breaks various bundlers including create-react-app when the MarkerCluster plugin pulls in the new react-leaflet as a peer dependency.

The CodeSandbox you linked is using version 3.0.2 and one fix is for you to use a react-leaflet version <3.2.0 in your package.json

"react-leaflet": ">=3.1.0 <3.2.0",
"@react-leaflet/core": ">=1.0.0 <1.1.0"  // you may not need this one

Of course this will prevent you from picking up updates in the future, so you will need to check the Github issues periodically and see if a fix has been released.