Color mode switching in a React App

I'm using a custom hook to handle light/dark mode toggling in my React app, which leverages MUI's theming. The hook manages the mode state, stores it in localStorage, and provides a toggleColorMode function. Additionally, I have a context that allows components to access and modify the color mode. Although it works as expected, I still have some doubts about the code quality, so I'm looking for potential improvements.

How can I optimize the custom hook logic?

Custom hook:

export const useColorMode = () => {
  const [mode, setMode] = useState<PaletteMode>(
    (localStorage.getItem("mode") ?? "light") as PaletteMode
  );

  useEffect(() => {
    localStorage.setItem("mode", mode);
  }, [mode]);

  const colorMode = useMemo(
    () => ({
      toggleColorMode: (tempMode: string) => {
        setMode(tempMode === "dark" ? "dark" : "light");
      },
    }),
    [mode]
  );

  const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode]);

  return { theme, colorMode };
};

Context:

import { createContext } from "react";

export const ColorModeContext = createContext<{
  toggleColorMode: (tempMode: string) => void;
}>({
  toggleColorMode: () => {},
});

App:

export const App = () => {
  const { theme, colorMode } = useColorMode();

  return (
    <QueryClientProvider client={queryClient}>
      <ColorModeContext.Provider value={colorMode}>
        <ThemeProvider theme={theme}>
          <ModalProvider>
            <ReactQueryDevtools initialIsOpen={false} />
            <CssBaseline />
            <Router />
          </ModalProvider>
        </ThemeProvider>
      </ColorModeContext.Provider>
    </QueryClientProvider>
  );
};

Component:

  const colorMode = useContext(ColorModeContext);

  const saveTempMode = () => {
    colorMode.toggleColorMode(tempMode);
    setIsToggled(false);
  };