<Suspense> not fallbacking correctly

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";

const getData = query(async () => {
  "use server";

  await new Promise((r) => setTimeout(r, 5000));

  return { hello: { other: "hello" } };
}, "data");

export default function Home() {
  const data = createAsync(() => getData());

  return <Suspense fallback={<p>Loading...</p>}>{data().hello}</Suspense>;
}

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";

const getData = query(async () => {
  "use server";

  await new Promise((r) => setTimeout(r, 5000));

  return { hello: { other: "hello" } };
}, "data");

export default function Home() {
  const data = createAsync(() => getData());

  return <Suspense fallback={<p>Loading...</p>}>{data().hello}</Suspense>;
}