SolidStart SSR: Why does createAsync data work in JSX but not in a child component?

export const route = {
  preload() {
    getUserProfileQuery();
  },
} satisfies RouteDefinition;

export default function Profile() {
  const userProfile = createAsync(() => getUserProfileQuery(), {
    deferStream: true,
  });

  return (
    <div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
      <p>{userProfile()?.data?.nickname}</p>
      <p>{userProfile()?.data?.date_of_birth?.toString()}</p>
      <p>{userProfile()?.data?.height_cm}</p>
      <p>{userProfile()?.data?.gender}</p>
      {/* The above JSX renders data correctly */}
      
      <NumberField
        step={0.1}
        defaultValue={userProfile()?.data?.height_cm}
      >
        <NumberFieldLabel>Height</NumberFieldLabel>
        <NumberFieldGroup>
          <NumberFieldInput name="height_cm" />
          <NumberFieldIncrementTrigger />
          <NumberFieldDecrementTrigger />
        </NumberFieldGroup>
      </NumberField>
      {/* This component doesn't work properly until I refresh the page */}
    </div>
  );
}