React Context Unavailable in Next.js Server Component when using next-auth

Question

I'm building a Next.js application with authentication using the next-auth library. I have set up an authentication context using the SessionProvider from next-auth/react. However, I'm encountering an error "React Context is unavailable in Server Components" when trying to use this context within a component.

I've reviewed my code and tried to ensure that I'm using the context provider in client-side components and not within server-side code like getServerSideProps. Despite this, I'm still facing this error.

AuthContext.tsx

'use-client';
import { SessionProvider } from "next-auth/react";

interface AuthContextProps {
children: React.ReactNode;
}

export default function AuthContext({ children }: AuthContextProps) {
return <SessionProvider>{children}</SessionProvider>;
}

LoginAuth.tsx

'use-client';

import { useSession } from 'next-auth/react';
import { useEffect } from 'react';

function LoginAuth() {
const session = useSession();

useEffect(() => {
if (session?.status === "authenticated") {
console.log("Arooj I Love You");
    }
[session?.status]);

Rest of the component
}

Despite these precautions, I'm still receiving the error. I'm not sure if there's something wrong with my code structure or if there's something else I'm missing. I've tried to read through the documentation and similar issues, but I'm having trouble pinpointing the exact problem.

Any help or guidance on how to resolve this issue would be greatly appreciated. Thank you in advance!