how to apply different styles to react leaftlet map based on state

Question

I want to apply these certain styles to my react leaflet map when the user clicks a button to signal that they want a dark themed map or a light themed one but I am not entirely sure how to go about setting up the styles object properly I have created a function to determine the state being light or dark to decide what styles to apply to the map and then the function but not sure if I should have a state for the styles or if I should just have separate style objects and I am also not entirely sure how to adjust the react leaflet map to apply a dark themed to it I have looked around but cannot seem to find any resources on how to

Map component:

import react from 'react';
import { useState, useEffect} from 'react';
import { MapContainer, TileLayer, Popup} from 'react-leaflet';
import MapComp from './MapComp';


function Map() {

    const [activities, setActivities] = useState([]);
    const [polylines, setPolylines] = useState(null); // as empty array value is still truthy
    const [isLoading, setIsLoading] = useState(true);
    const [mapMode, setMapMode] = useState('light');
    const [mapStyle, setMapStyle] = useState({});


/*


*/

    function changeMapStyle() {
        if(mapMode === 'light') {
            setMapMode('dark');
           
          }
        else {
            setMapMode('light');
        }
    }


    return (
        
        <>
        <button onClick={changeMapStyle}>Change Map style</button>
        <MapComp className={`${mapMode}`}  style={{ width: "100%", height: "calc(100vh - 4rem)" }}/>
        </>
        
    )

    
}

export default Map;

unsure about this file as I do not think the styles apply correctly to the map. Styles where sourced at https://github.com/pkrasicki/issviewer/blob/master/public/css/dark-theme.css these styles where applied to vanilla js so that is why I am unsure.

style file:

.dark {
    --background: rgb(40, 44, 54);
    --nav-background: rgba(0, 0, 0, 0.7);
    --text: rgba(255, 255, 255, 0.85);
    --link: rgb(122, 191, 255);
    --link-hover: rgb(143, 200, 253);
    --text-label-color: rgb(255, 95, 95);
    --location-input-bg: rgba(0, 0, 0, 0.2);
    --location-input-color: rgba(255, 255, 255, 0.9);
    --location-input-border: transparent;
    --map-background: #1f1f1f;
    --map-border: rgba(255, 255, 255, 0.1);
    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
    --map-attribution-bg: rgba(0, 0, 0, 0.6);
    --map-attribution-color: rgb(161, 161, 161);
    --map-zoom-bg: rgb(26, 26, 26);
    --map-zoom-border-bottom: rgba(255, 255, 255, 0.3);
    --brightness-bar-full: var(--primary);
    --spinner-color: var(--primary);
    width: "100%";
    height: "calc(100vh - 4rem)"
}

.light {
    width: "100%";
    height: "calc(100vh - 4rem)"
}

@media(prefers-color-scheme: dark) {

    :root {
        --background: rgb(40, 44, 54);
        --nav-background: rgba(0, 0, 0, 0.7);
        --text: rgba(255, 255, 255, 0.85);
        --link: rgb(122, 191, 255);
        --link-hover: rgb(143, 200, 253);
        --text-label-color: rgb(255, 95, 95);
        --location-input-bg: rgba(0, 0, 0, 0.2);
        --location-input-color: rgba(255, 255, 255, 0.9);
        --location-input-border: transparent;
        --map-background: #1f1f1f;
        --map-border: rgba(255, 255, 255, 0.1);
        --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
        --map-attribution-bg: rgba(0, 0, 0, 0.6);
        --map-attribution-color: rgb(161, 161, 161);
        --map-zoom-bg: rgb(26, 26, 26);
        --map-zoom-border-bottom: rgba(255, 255, 255, 0.3);
        --brightness-bar-full: var(--primary);
        --spinner-color: var(--primary);
    }
}