Не запускается useEffect в next js

я пытался создать хук useEffect, который будет получать данные о том, как тема установлена у пользователя, но хук useEffect не запускается, как можно решить данную проблему? Если что, я работаю c Next js

import React, { createContext, useEffect, useState } from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import { CssBaseline } from "@material-ui/core";
import { darkTheme, lightTheme } from "../utiles/themeObj";

const Theme: React.FC = ({ children }) => {
  useEffect(() => {
    debugger
    if (typeof window !== 'undefined') {
      let theme: undefined | string = localStorage.getItem('darkTheme')
      debugger
      if (theme === 'undefined') {
        localStorage.setItem('darkTheme', String(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches))
      }
    }
  }, [])

  const getTheme = (): object | null => {
    if (typeof window !== 'undefined') {
      if (JSON.parse(localStorage?.darkTheme)) {
        return darkTheme
      }
      return lightTheme
    } else {
      return null
    }
  }

  return (
    <ThemeProvider theme={getTheme()}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
};

export default Theme;