"useContext must be inside a Provider with a value" when using getLayout

[muhammadali286]

Here is my _app.tsx

return (
    <SaleorAuthProvider {...useSaleorAuthClientProps}>
      <ApolloProvider client={apolloClient}>
          <CheckoutProvider>
            <RegionsProvider>
              <BaseSeo />
              <NextNProgress color="#5B68E4" options={{ showSpinner: false }} />
              {DEMO_MODE && <DemoBanner />}
              {getLayout(<Component {...pageProps} />)}
            </RegionsProvider>
          </CheckoutProvider>
        </ApolloProvider>
    </SaleorAuthProvider>
  );

Here is how preference page is getting load in preferences.tsx

AccountPreferencesPage.getLayout = (page: ReactElement) => {
  return <AccountLayout>{page}</AccountLayout>;
};

But i am still getting error
useContext must be inside a Provider with a value

I have created custom provider and also made sure the component is loading through the existing wrapped providers but still getting this error.

[muhammadali286]

useSaleorAuthContext was needed to import from "@saleor/auth-sdk/react" instead of @/lib/auth.