Does anyone have experience in saving a sanity fetch as global properties in next.js?

import { AppContext } from "./useAppContext";

function MyApp({ Component, pageProps }) {
  const { myGlobalProp } = pageProps;

  return (
    <AppContext.Provider value={{ myGlobalProp }}>
      <Component {...pageProps} />
    </AppContext.Provider>
  );
}

export default MyApp;

import { createContext, useContext } from "react";

export const AppContext = createContext(null);
export const useAppContext = () => useContext(AppContext);

import { useAppContext } from "./useAppContext";

export const MyComponent = () => {
  const { myGlobalProp } = useAppContext();
  return <div>{ myGlobalProp }</div>
};