Passing Dynamic Variables & Filters to TRPC results in Hydration Error in Next.JS?

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>
      // .... display some data here
    </main>
  );
};

export default Home;