<Suspense> not fallbacking correctly

[woeful yoke]

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>;
}

TypeError Cannot read properties of undefined (reading 'hello')

i have to put optional chaining (data()?.hello) on every property access and it works

is this normal?