Set checkbox checked or nonChecked if darkmode is activated | REACT

Im new in react, i try the reference mode or state mode, but the page render a lot of times, or when i click in my checkbox, dont change the checked option. Im using tailwind darkmode

when i load the page, there are a conditional that check if darkmode is activated or not, so if loadind the page darkmode is enabled, the checkbox must be true and if not must be false, simply

import React, {useEffect, useState} from "react";

function Header() {
    const [darkMode, setDarkMode] = useState(false);
    useEffect(() =>{
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark')
            localStorage.theme = 'dark'
            setDarkMode(!darkMode)
          } else {
            document.documentElement.classList.remove('dark')
            localStorage.theme = 'light';
            console.log('modo luz activado')
          }
    },[])
    

  const changeTheme = () => {
    
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.remove("dark");
      localStorage.theme = "light";
    } else {
      document.documentElement.classList.add("dark");
      localStorage.theme = "dark";
    }
  };
  
  return (
    <header>
      <nav>
        <input checked={darkMode} type="checkbox" onChange={changeTheme} />
      </nav>
    </header>
  );
}

export default Header;

You should have your change theme function like this:

const changeTheme = () => {
    localStorage.theme = darkMode ? 'light' : 'dark'
    setDarkMode(!darkMode)
    if (darkMode) {
        document.documentElement.classList.remove("dark");
    } else {
        document.documentElement.classList.add("dark");
    }
};