my Provider.ts file

"use client";

import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { ThemeProvider } from "next-themes";
import { ReactNode } from "react";

export function Providers({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <SessionProvider>
      <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
    </SessionProvider>
  );
}

my theme toggle button

"use client";

import { IconButton } from "@mui/material";
import { useTheme } from "next-themes";
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';

export const ThemeToggleButton = () => {
  const { theme, setTheme } = useTheme();
  console.log(theme);
  
  return (
    <div>
      <IconButton
        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      >
        {theme === 'dark' ? <Brightness4Icon /> : <Brightness7Icon />}
      </IconButton>
    </div>
  );
};

the theme is dark but my Icon button is showing light-icon

and if i click it again it will again give me dark , and then it works fine

the theme state is not syncing properly somehow

it is

you didnt disable system

but i passed the default theme right ?

should that set it to dark in the first time ?

and it's even logging theme as "dark"

but rendered button is light