Как использовать React Context API для переключения темы?

Question

Я изучаю контекстный API React. Я хочу нажать на кнопку, чтобы переключить тему. Но сейчас это не работает. Не уверен, что не так. Вот код Я хочу практиковать контекст React и контекстный хук одновременно.

import "./styles.css";

export const ThemeContext = createContext("light");

export const ToggleTheme = () => {
  const { themeMode,setThemeMode } = useContext(ThemeContext);
  console.log(themeMode);
  return <button onClick={() => setThemeMode()}>
    {themeMode === 'light' ? "Dark" : "Light"}
  </button>;
};
export default function App() {
  const themes = {
    light: {
      background: "#ffffff",
      font: "#333333"
    },
    dark: {
      background: "#121212",
      font: "#ffffff"
    }
  };
  const [themeMode, setThemeMode] = useState("light");
  const themeToggleHandler = () => {
    setThemeMode(themeMode === themes.light ? themes.dark : themes.light)
  }
  return (
    <ThemeContext.Provider value={{ themeMode, setThemeMode }}>
      <div className="App" style={{backgroundColor: themes.background}}>
        <ToggleTheme
          onClick={themeToggleHandler}
        />
        <h1 style={{color: themes.font}}>Hello CodeSandbox</h1>
        <h2 style={{color: themes.font}}>Start editing to see some magic happen!</h2>
      </div>
    </ThemeContext.Provider>
  );
}