TypeError: Cannot read property 'useContext' of null nextjs

I am going to get user from context and use it in header in nextjs strapi apollo graphql project User is accessable in App function but outside its giving above error. Is context values accessable outside function if yes how can I access it if no how to structure it so that I can use it in request header.

import "../styles/globals.css";
import Layout from "../components/Layout";
import { Provider } from "../context/AppContext";
import Cookies from "js-cookie";
import withApollo from "next-with-apollo";
import { BACKEND_URL } from "../helpers";
import React, { useContext } from "react";
import { AppContext } from "../context/AppContext";
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";



const { user } = useContext(AppContext);

console.log("user from context in _app", user);

function App({ Component, pageProps, apollo }) {
  return (
    <Provider>
      <ApolloProvider client={apollo}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </ApolloProvider>
    </Provider>
  );
}

export default withApollo(({ initialState, headers }) => {
  return new ApolloClient({
    uri: `${BACKEND_URL}/graphql`,
    cache: new InMemoryCache().restore(initialState || {}),
    ...(user && {
      headers: {
        authorization: `Bearer ${user.token}`,
      },
    }),
  });
})(App);