import { DashboardNav } from "@/components/elements";
import { ThemeProvider } from "next-themes";
import React from "react";

type Props = {
  children: React.ReactNode;
};

const layout = ({ children }: Props) => {
  return (
    <div className="flex items-start relative">
      <DashboardNav />
      <div className="border-t-[1px] pb-20 h-screen rounded-l-3xl border overflow- 
      scroll w-full">
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </div>
    </div>
  );
};

export default layout;

I am trying to make my dashboard have a light and a dark mode, but the problem I am facing is once the theme has been changed, the changes reflect on the pages inside (app), so I always have to refresh to go back to the light mode. The ThemeProvider is built inside the (main)>(dashboard) layout.tsx. Your help will be extremely appreciated. I appreciate any help you can provide.