Change tile at TileLayer at state change

by

My question is how to change url of tile map in that case:

function ChangeView({ center, zoom }) {
    const map = useMap();
    map.setView(center, zoom);
    return null;
}   

function TrackerMap({ darkMode, countries, casesType, center, zoom}) {

    const currentTheme = useContext(ThemeContext);
    const mapTheme = darkMode ? `https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png` : `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`;

    return (
        <MapWrapper currentTheme={currentTheme}>
            <MapContainer center={center} zoom={zoom}>
                <ChangeView center={center} zoom={zoom} />  
                <TileLayer 
                    url={mapTheme}
                />
            </MapContainer>
        </MapWrapper>
    )
}

I would like to toggle TileLayer style in relation with darkMode props value. But in that implementation the new values at darkMode proprs dont trigger a changes at <TileLayer />

48 thoughts on “Change tile at TileLayer at state change”