El contexto en Next.js está indefinido (0, react__WEBPACK_IMPORTED_MODULE_0__.useContext).

Estoy creando una autenticación para cada ruta y quiero tener el valor del usuario disponible en cada ruta, por eso uso el contexto.

Creé un componente de diseño que importo en la aplicación justo después del contexto de esta manera:

function MyApp({ Component, pageProps }) {
  const router = useRouter()
  useEffect(() => {
    if (router.pathname == '/' || router.pathname == '/_error') {
      router.push('/login')
    }
  }, [])
  return (
    <authprovider>
      <layout>
        <component {...pageprops}=""></component>
      </layout>
    </authprovider>
  )
}

export default MyApp

Aquí está mi componente de diseño:

const Layout = ({ children }) => {
  const { loggedInUser } = useContext(AuthContext)
  const router = useRouter()
  useEffect(() => {
    if (router.pathname == '/' || router.pathname == '/_error') {
      ...
    }
  }, [])

  return <div>{children}</div>
}

export default Layout

Aquí está mi contexto:

export const AuthContext = React.createContext()

function AuthProvider(props) {
  const [loggedInUser, setUserLoggedIn] = useState()

  useEffect(() => {
    onAuthStateChanged(auth, (currentUser) => {
      if (!currentUser) {
        setUserLoggedIn(currentUser)
      } else {
        ...
      }
    })
  }, [])

  return <authcontext.provider value="{{" loggedinuser,="" setuserloggedin="" }}="">{props.children}</authcontext.provider>
}

export default AuthProvider

Cuando intento acceder a una ruta, obtengo este error:
TypeError: No se puede desestructurar la propiedad ‘loggedInUser’ de ‘(0, react__WEBPACK_IMPORTED_MODULE_0__.useContext)(…)’ ya que no está definida.

¡Espero que puedas ayudarme!