Whenever my state is being updated, React is rendering my component twice

Question

function App() {
    const [darkMode, setDarkMode] = useState(false);
    function modeToggle() {
        setDarkMode((prevMode) => !prevMode);
    }

    return (
        <>
            <nav>
                <h1>Sports League Simulation Table</h1>
                <h3>{darkMode ? "Dark" : "Light"} Mode</h3>
                <label className="switch" onClick={modeToggle}>
                    <input type="checkbox" />
                    <span className="slider round"></span>
                </label>
            </nav>
        </>
    );
}

Whenever I click my label, the value of darkMode rather than changing once to opposite value changes twice to return back to it's original value.

I am trying to make sure that state change re-renders the component with new value for .