export const NextAuthProvider = ({children}: { children: React.ReactNode }) => {
    const {data: session, status} = useSession();
    console.log(status)
    return <SessionProvider session={session}>{children}</SessionProvider>;
};

export function MainCookieProvider({
                                       children
                                   }: {
    children: React.ReactNode
}) {
    const [cookies, setCookie, removeCookie] = useCookies(["user"]);
    const [user, setUser] = useState<User>(cookies.user || null)
    const ClientProviderOverride = ClientProvider as any;
    const {data: session, status} = useSession()

    return (
        <NextAuthProvider>
            {
                status === "authenticated" ?
                    <ThemeProvider
                        attribute="class"
                        enableSystem
                        disableTransitionOnChange
                    >
                        <ClientProviderOverride>
                            {children}
                        </ClientProviderOverride>
                    </ThemeProvider> :
                    <MainLayoutProvider>
                        {children}
                    </MainLayoutProvider>
            }
        </NextAuthProvider>
    )
}

Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />