Fetching User Session Data on the Client Side with useSession

'use client';

import { useRouter } from 'next/navigation';
import { useUserResumes } from '@/app/utils/resumeClient';
import { useCoverLetterActions } from '@/app/utils/coverLetterClient';
import { useSubscription } from '@/app/utils/userClient';
import { useSession } from 'next-auth/react';
import LoadingSpinner from '@/app/_components/LoadingSpinner';
import DocumentTabs from '@/app/_components/DocumentTabs';

const DashboardPage = () => {
  const router = useRouter();
  const { data: session, status } = useSession();
  if (status === 'unauthenticated') {
    router.push('/api/auth/signin');
    return null;
  }
  
  const { data: userResumes, isLoading: resumesLoading } = useUserResumes();
  const { getUserCoverLetters } = useCoverLetterActions();
  const { data: userCoverLetters, isLoading: coverLettersLoading } = getUserCoverLetters();
  const { subscription, isLoading: subscriptionLoading } = useSubscription();
  if (resumesLoading || coverLettersLoading || subscriptionLoading || status === 'loading') {
    return <LoadingSpinner />;
  }
  

  return (
    <DocumentTabs
      userResumes={userResumes || []}
      userCoverLetters={userCoverLetters || []}
      user={session?.user}
      subscriptionPlan={subscription}
    />
  );
};

export default DashboardPage; 

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