pageContext.jsx

import React from 'react';
import { useTranslation } from 'react-i18next';

const PageContext = React.createContext({});

export const PageContextProvider = ({ pageContext, children }) => {
  const { i18n } = useTranslation();
  i18n.changeLanguage(pageContext.lang);

  return <PageContext.Provider value={pageContext}>{children}</PageContext.Provider>;
};

export const usePageContext = () => React.useContext(PageContext);

Fixes:

• const PageContext = React.createContext({});

• return <PageContext.Provider value={pageContext}>{children}</PageContext.Provider>;

And I added a check:
if(i18n.language != pageContext.lang) i18n.changeLanguage(pageContext.lang);
otherwise I have the following error: 'Too many re-renders. React limits the number of renders to prevent an infinite loop.'

For some reason I missed this comment for so long. Thanks so much for this, I've updated this