Next-auth报错：useSession需包裹在<SessionProvider />中求排查

return (<SessionProvider />)

反复遇到报错：[next-auth]: useSession must be wrapped in a <SessionProvider />，已经排查数小时仍未解决，怀疑是_app.tsx的文件位置导致问题。以下是我的项目文件树截图，以及Navbar.tsx和_app.tsx的代码，麻烦帮忙排查问题所在：

Navbar.tsx代码 #

"use client"
import React from 'react'
import Link from 'next/link'
import { NavLinks } from '@/constants'
import { signIn, signOut, useSession } from 'next-auth/react'

const Navbar = () => {
    const { data: session, status } = useSession()
    return (
        <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
            <div className="hidden lg:flex lg:flex-1 lg:justify-end">
                {status === 'authenticated' ? (
                    <a href="#" onClick={() => signOut()} className="text-sm font-semibold leading-6 text-gray-900">Sign out {session.user?.email}<span aria-hidden="true">&rarr;</span></a>
                ) : (
                    <a href="#" onClick={() => signIn('spotify')} className="text-sm font-semibold leading-6 text-gray-900">Log in <span aria-hidden="true">&rarr;</span></a>
                )}
            </div>
        </nav>
    )
}
export default Navbar

_app.tsx代码 #

import { SessionProvider } from "next-auth/react"
import type { AppProps } from "next/app"
import type { Session } from "next-auth"
import "./globals.css"

export default function App({ Component, pageProps: { session, ...pageProps }}: 
  AppProps<{ session: Session }>) {
  return (
    <SessionProvider session={session} refetchInterval={5 * 60}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

内容的提问来源于stack exchange，提问作者Broken