Unsure if PersistQueryClientProvider is working with Next.js

function MyApp({ Component, pageProps }) { 
  const router = useRouter()
  const [supabaseClient] = useState(() => createBrowserSupabaseClient())
  const [queryClient] = useState(() => new QueryClient({ 
    defaultOptions: {
      queries: {
        cacheTime: 1000 * 60 * 60 * 24 // 24 hours
      }
    }
  }))
  let persister = useRef(null)


  
  useEffect(() => {
    const handleRouteChangeStart = () => {
      NProgress.start()
    }

    const handleRouteChangeComplete = (url) => {
      NProgress.done()
    }

    router.events.on('routeChangeStart', handleRouteChangeStart)
    router.events.on('routeChangeComplete', handleRouteChangeComplete)
    return () => {
      router.events.off('routeChangeStart', handleRouteChangeStart)
      router.events.off('routeChangeComplete', handleRouteChangeComplete)
    }
  }, [router])

  if (typeof window !== 'undefined') {
    persister = createSyncStoragePersister({
      storage: window.sessionStorage
    })
  }

  
  
  return (
      <>
        <PlausibleProvider domain="nesteek.com">
          <SessionContextProvider supabaseClient={supabaseClient} initialSession={pageProps.initialSession}>
            <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
              <Hydrate state={pageProps.dehydratedState}> 
                <ChakraProvider theme={theme}>
                  <Layout>
                    <Component {...pageProps} />  
                  </Layout>
                </ChakraProvider> 
              </Hydrate>
            </PersistQueryClientProvider>
          </SessionContextProvider>
        </PlausibleProvider>      
      </>
    )
}