Coding Begginer here, I added a toggle between darkmode and then leaflet OpenStreetMap now I can't figure out why the text on my leaflet map isn't visible. Here's the images:

Is there any way to fix this? Here's darkmode toggle code on typescript:

const ThemeToggle = () => {
    const [darkMode, setDarkMode] = useState(true)
    useEffect(() => {
        const theme = localStorage.getItem('theme')
        if (theme === 'dark') setDarkMode(true)
    }, [])
    useEffect(() => {
        if (darkMode) {
            document.documentElement.classList.add('dark')
            localStorage.setItem('theme', 'dark')
        } else {
            document.documentElement.classList.remove('dark')
            localStorage.setItem('theme', 'light')
        }
    }, [darkMode])
    return (
        <div
            className="relative w-16 h-8 flex items-center dark:bg-gray-900 bg-amber-100 cursor-pointer rounded-full p-1 duration-500"
            onClick={() => setDarkMode(!darkMode)}
        >
            <BsSunFill className="text-yellow-500 duration-500" size={18} />
            <div
                className="absolute bg-white dark:bg-slate-500 w-6 h-6 rounded-full shadow-md left-[2.7em] duration-500"
                style={darkMode ? { left: '2px' } : { right: '2px' }}
            ></div>
            <FaMoon className="text-white ml-auto duration-500" size={18} />
        </div>