Suspense not getting triggered although I am accessing the result of createAsync in my components

<Suspense
      fallback={
        <div class="flex-1 items-center justify-center">
          <DottedLoader color="#999" from="checkout suspense" />
        </div>
      }
    >

<Suspense
      fallback={
        <div class="flex-1 items-center justify-center">
          <DottedLoader color="#999" from="checkout suspense" />
        </div>
      }
    >

const routeData: Accessor<ProcurementCheckoutRouteData | undefined> =
    createAsync<ProcurementCheckoutRouteData>(() => {

const routeData: Accessor<ProcurementCheckoutRouteData | undefined> =
    createAsync<ProcurementCheckoutRouteData>(() => {

<div class="px-3 text-h4 text-textDark">
              Proceed to pay {routeData()?.xxx}
            </div>

<div class="px-3 text-h4 text-textDark">
              Proceed to pay {routeData()?.xxx}
            </div>