Help Me Solve "undefined" warning When Using <Show> Component

const order = createAsync(() => getOrder(params.chargeId));

Type 'Accessor<Order | undefined>' is not assignable to type 'Accessor<Order>'

import { Order } from "~/types/order";
// CACHE ============================================================
const getOrder = cache(async (chargeId: string) => {
  "use server";
  const { data } = await supabase
    .from("orders")
    .select()
    .eq("stripe_charge_id", chargeId)
    .single();
  if (!data) {
    return undefined;
  } else {
    return data as Order;
  }
}, "order");

export default function OrderDetailsPage() {
  const params = useParams();
  const order = createAsync(() => getOrder(params.chargeId));
  return (
    <>
      <h4>Order Details</h4>
      <Show when={order()} fallback="Order loading...">
        <OrderTable order={order} />
      </Show>
    </>
  );
}