SolidStart with TanStack Query causing hydration error

import {
  QueryClient,
  QueryClientProvider,
  createQuery,
} from "@tanstack/solid-query";
import { For, Switch, Match } from "solid-js";
import { getUserMessages } from "~/utils/get-messages";

export default function App() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnMount: false,
        staleTime: Infinity,
      },
    },
  });
  return (
    <QueryClientProvider client={queryClient}>
      <Messages />
    </QueryClientProvider>
  );
}

function Messages() {
  const query = createQuery(() => ({
    queryKey: ["messages"],
    queryFn: getUserMessages,
  }));

  return (
    <div>
      <Switch>
        <Match when={query.isError}>Error</Match>
        <Match when={query.isLoading}>Loading...</Match>
        <Match when={query.isSuccess}>
          <For each={query.data}>
            {(message) => <div>{message.messageText}</div>}
          </For>
        </Match>
      </Switch>
    </div>
  );
}

type Message = {
    userId: number
    messageText: string
}

export function getUserMessages(){
    return [
        {userId: 1, messageText: 'Hello World'}
    ]
}

Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-1-0-0-0-0-0-0-0-0-0-0-0-0-0-3