createResource / Suspense blocks rendering

import { createResource, Suspense } from "solid-js";

async function fetchData(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched from API");
    }, 5000); // Simulate a 2-second delay
  });
}
export default function () {
  const [resource] = createResource(fetchData);

  return (
    <Suspense fallback={<p>loading...</p>}>
      <div>HELLO WORLD</div>
      {resource()}
    </Suspense>
  );
}