Hydration error when using useQuery instead of useSuspenseQuery when prefetching

export const PostsPage = async ({ params }: PostsPageProps) => {
  trpc.posts.getAll.prefetch({ userId: user.id });

  return (
    <HydrateClient>
      <PostsTable userId={user.id} />
    </HydrateClient>
  );
};

export const PostsTable = ({ userId }: PostsTableProps) => {
  const { data: posts, isPending } = trpc.posts.getAll.useQuery({
    userId,
  });

  const { table } = useDataTable({
    data: posts ?? [],
  });

  return (
    <DataTable table={table} isLoading={isPending}>
      { /* ... */ }
    </DataTable>
  );
};

return isLoading ? (
    <TableRow className="hover:bg-transparent">
      {table.getLeafHeaders().map((_, i) => (
        <TableCell key={i}>
          <Skeleton className="h-6 w-full" />
        </TableCell>
      ))}
    </TableRow>
  ) : (
    <TableRow>
      <TableCell
        colSpan={table.getAllColumns().length}
        className="h-24 text-center"
      >
        No results.
      </TableCell>
    </TableRow>
  )}