Hydration Error in Next.JS with Trpc / React-Query (even when not displaying the pulled data)

const Home: NextPage = () => {
  const [filterPublishedPosts, setFilterPublishedPosts] = useState(false)

  const { data, isLoading } = trpc.item.getAllPosts.useQuery({
    text: "from tRPC", filters: {
      filterPublishedPosts: filterPublishedPosts
    }
  });

  return (
    <main>
      <button onClick={() => {
            setFilterPublishedPosts(!filterPublishedPosts)
          }}>
            Show Only Published Posts
      </button>
      // .... at some point, display some data here
    </main>
  );
};

export default Home;

I am using useState on the frontend to keep track of what the user wants to see and then pass that down as a variable to trpc / react-query.

Why does it give me an hydration error? Not sure I understand why the data would be different on the server / client in this case? But I get:

Error: Hydration failed because the initial UI does not match what was rendered on the > server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Don't understand that though, because the hydration error comes up, even if I don't render any data! Just fetching it.

There should be more info in the console. It could be because of wrong HTML semantics. More info here.