Error: No QueryClient set, use QueryClientProvider to set one

 const {
    data,
    isLoading,
    error,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
  } = api.products.getAllByPage.useInfiniteQuery(
    {
      cursor: page,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextPage,
      getPreviousPageParam: (page) => page.prevPage,
    }
  );

export const productsRouter = createTRPCRouter({
  getAll: publicProcedure.query(async () => {
    const { data } = await axios.get(`${baseUrl}/products/`);

    return data;
  }),

  getAllByPage: publicProcedure
    .input(z.object({ cursor: z.number().nullish() }))
    .query(async ({ input }) => {
      const { data } = await axios.get<{
        prevPage: number;
        currentPage: number;
        nextPage: number;
        totalPages: number;
        products: IProduct[];
      }>(`${baseUrl}/products/get-all-by-page/${input?.cursor ?? 1}`);

      if (!data) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Failed to fetch products!",
        });
      }

      return data;
    }),
});

return (
    <QueryClientProvider client={queryClientRef.current} contextSharing={true}>
      {/* @ts-ignore */}
      <Hydrate state={pageProps.dehydratedState}>
        <ManagedUIContext>
          <>
            <DefaultSeo />
            <Layout pageProps={pageProps}>
              <Component {...pageProps} key={router.route} />
            </Layout>
            <ToastContainer />
            <ManagedModal />
            <ManagedDrawer />
          </>
        </ManagedUIContext>
      </Hydrate>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );