server-side helpers doesnt work with `Hydrate` and `QueryClient`

const App = () => {
...
 <QueryClientProvider client={queryClient}>
  <Hydrate state={pageProps.dehydratedState}>
    <Component {...pageProps} />
    <ReactQueryDevtools initialIsOpen={false} />
  </Hydrate>
</QueryClientProvider>;
}

export default  bff.withTRPC(App)

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: createTRPCContext({
      req: ctx.req as NextApiRequest,
      res: ctx.res as NextApiResponse,
    }),
    transformer: superjson,
  });

  const returned = await helpers.auth.session.fetch();

  console.log(returned);

  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
  };
};

function PlaygroundPage() {
  const { data } = bff.auth.session.useQuery();

  return (
    <div className="mx-auto my-auto">
      <div className="max-w-[400px]">{JSON.stringify(data?.accessToken)}</div>
      <button type="button">login</button>
    </div>
  );
}

export default PlaygroundPage;