I'm trying to build a dark mode toggle in JS using React. I'm using Material-UI to design my page and I've managed to make the button change the theme of my whole page when clicked. My issue is that whenever I refresh or change the Routes, the button state doesn't get carried over. Is there anything I'm missing?

This is the code for my button:

export default function ThemeSwitch({ toggleDark, settoggleDark }) {
  const handleModeChange = () => {
    settoggleDark(!toggleDark);
  };
  return (
    <div className="theme-btn">
      <IOSSwitch
        checked={toggleDark}
        onChange={handleModeChange}
        name="toggleDark"
        color="default"
      />
    </div>
  );
}

And this is my App.js:

function App() {
  const [toggleDark, settoggleDark] = useState(false);

  const myTheme = createTheme({
    palette: {
      mode: toggleDark ? "dark" : "light",
      primary: {
        main: "#ff1744",
      },
      secondary: {
        main: "#880e4f",
      },
    },
  });

  return (
    <Router>
      <ThemeProvider theme={myTheme}>
        <CssBaseline />
        <Navbar />
        <ThemeSwitch
          toggleDark={toggleDark}
          settoggleDark={settoggleDark}
          className="theme-btn"
        />
        <UserAuthContextProvider>
          <Routes>
            <Route
              path="/"
              element={
                <ProtectedRoute>
                  <Hero />
                </ProtectedRoute>
              }
            />
            <Route path="signup" element={<SignUp />} />
            <Route path="signin" element={<SignIn />} />
          </Routes>
        </UserAuthContextProvider>
      </ThemeProvider>
    </Router>
  );
}