Estoy agregando el siguiente código a mi archivo js existente para validar la autenticación y estoy tratando de seguir la siguiente documentación de autenticación, pero recibo este error "[next-auth]: useSession debe estar envuelto en un SessionProvider"

estoy usando credenciales de github para las validaciones

mi código: Trabajando al navegar al host local: 3000/auth/api/signin

[... nextauth.js]

 import NextAuth from 'next-auth' import GitHubProvider from 'next-auth/providers/github' export default NextAuth({ providers:[ GitHubProvider({ clientId: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET, }), ], })

Quiero poner la autenticación a mi código escrito en abc/index.js

Este es mi código con la próxima autenticación y arroja este error "[próxima autenticación]: useSession debe estar envuelto en un SessionProvider"

localhost:3000/abc/index.js

 import React, { Component, useMemo, useState, useEffect } from 'react'; import { useSession, SessionProvider } from 'next-auth/react'; function MyApp({ Component, pageProps }) { // i have added it here since I am not using _app.js file return ( <SessionProvider session={pageProps.session}> <Component {...pageProps} /> </SessionProvider> ); } const abc = ({ json }) => { const { data: session } = useSession(); if (session) { return ( <> Signed in as {session.user.email} <br /> <button onClick={() => signOut()}>Sign out</button> </> ); } return ( <> Not signed in <br /> <button onClick={() => signIn()}>Sign in</button> </> ); };