tRPC not fetching data correctly with nextjs pages router

Question

I'm following the TRPC documentation to fetch data server side and avoid loading state while keeping refetching and what not.

Using Next JS with pages router.

I'm getting the data server side using getServerSideProps. The function generateSSGHelperis basically a copy of what is in the docs (I checked that I'm not generating context there using req & res, should not fail there)

export const getServerSideProps = async (ctx: GetServerSidePropsContext<{ id: string }>) => {

  const helpers = generateSSGHelper()

  const id = ctx.params?.id

  if (typeof id !== 'string') throw new Error('no id')

  helpers.partner.getById.prefetch({ id })


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

Just like in the docs, the dehydrated query is then used in the component:

const SinglePartnerPage: NextPage<{ id : string }> = ({ id }) => {
 
  const partner = api.partner.getById.useQuery({ id }) // <= prefetched on server

  if (partner.status !== 'success') { // this condition should never be true
    console.log('Loading!!')
    return <>Loading...</>
  }

  return (
    ...
  )

It turns out that Loading! is printed in the console, so the query is indeed not success at some point, which is causing me problems in other parts of the component.

What am I doing wrong here? Is my approach not ok?