Значок не обновляется при переключении состояния isDarkMode ⇐ Javascript

[Anonymous]

У меня возникла странная проблема с реакцией. Мой компонент должен отображать 1 из 2 разных значков на основе логического значения isDarkMode. Однако по какой-то причине значки не меняются, хотя логическое значение меняется. Они изменяются только при первоначальной визуализации сайта, и это все.
Я немного озадачен тем, что я сделал не так, любая помощь приветствуется.
"use client"
import React, { useEffect, useState } from 'react'
import { HiOutlineMoon, HiOutlineSun } from 'react-icons/hi'

export default function Switcher({ className, navbar }: { className?: string, navbar?: boolean }) {
const [isDarkMode, setIsDarkMode] = useState(false);

useEffect(() => {
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
setIsDarkMode(true);
} else {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
setIsDarkMode(false);
}

}, [])

function changeMode(mode: 'mode' | 'layout', event: React.SyntheticEvent): void {
if (mode === 'mode') {
if (document.documentElement.className.includes("dark")) {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
setIsDarkMode(false);
} else {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
localStorage.setItem('theme', 'dark');
setIsDarkMode(true);
}

}
}

useEffect(() => {
console.log("dark mode is: " + isDarkMode);
if (isDarkMode) {
console.log("Should show sun icon");
} else {
console.log("Should show moon icon");
}
}, [isDarkMode])

return (



{
console.log('Checkbox toggled. Current isDarkMode:', isDarkMode);
changeMode('mode', event)
}}
aria-label="Toggle dark mode"
/>

{isDarkMode ? (

) : (

)}




)
};```


Подробнее здесь: https://stackoverflow.com/questions/797 ... te-toggles