Switch between OSM and GMap at runtime

[Aky97567]

I would like to switch between OSM and GMap tiles based on a boolean:

const GMapsEnabled = false;
...
<MapContainer>
  {GMapsEnabled ? (<ReactLeafletGoogleLayer apiKey={apiKey} type="satellite" />) :
    (<TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      maxZoom={maxZoom}
      maxNativeZoom={maxNativeZoom}
    />
  )}
</MapContainer>

However, the tiles from OSM have stopped loading. My guess is that the tile urls for GMaps are different. It would be helpful if there is a way to have this configurability.

[Aky97567]

I am unable to reproduce this with codesandbox. I think I am doing something wrong. :(