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

I am getting the below error when I am loading my ProfilePage. Page loads fine in the browser, but I get this error in the terminal.

All the children are wrapped using SessionProvider.

Below is my layout.jsx file.

import Provider from './components/Provider'
import Nav from './components/Nav'

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

const RootLayout = ({ children }) => {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Provider>
          <div className="main">
            <div className="gradient" />
          </div>

          <main className="app">
            <Nav />
            {children}
          </main>
        </Provider>
      </body>
    </html>
  )
}

export default RootLayout

Below is my Provider.jsx component.

'use client'

import { SessionProvider } from 'next-auth/react'

const Provider = ({ children }) => {
  return <SessionProvider>{children}</SessionProvider>
}

export default Provider

Below is my page.jsx for the ProfilePage.

'use client'

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

const ProfilePage = () => {
  const { data: session } = useSession({
    required: true,
  })

  return (
    <section>
      <h1 className="head_text text-center">Profile</h1>
      <p>You are logged in as, {session?.user?.email}</p>
    </section>
  )
}

export default ProfilePage

Any help is appreciated.

Thank you.

Solution

I was able to fix the issue by clearing .next folder cache.