why store not updated in createAsync?

import { createStore } from "solid-js/store";
import { createAsync } from "solid-js";

export default function Demo() {
  const [user, setUser] = createStore({ name: "Initial", age: 0 });

  const data = createAsync(async () => {
    console.log("Start async", user);

    setUser({ name: "Changed", age: 99 });
    console.log("After setUser, user:", user);

    await new Promise((r) => setTimeout(r, 2000));

    console.log("After 2s, user:", user);

    return "done";
  }, { deferStream: true });

  return (
    <div>
      <h1>User Name: {user.name}</h1> {/* ❓ */}
      <h2>User Age: {user.age}</h2> {/* ❓ */}
      <h3>Data: {data()}</h3>
    </div>
  );
}

import { createStore } from "solid-js/store";
import { createAsync } from "solid-js";

export default function Demo() {
  const [user, setUser] = createStore({ name: "Initial", age: 0 });

  const data = createAsync(async () => {
    console.log("Start async", user);

    setUser({ name: "Changed", age: 99 });
    console.log("After setUser, user:", user);

    await new Promise((r) => setTimeout(r, 2000));

    console.log("After 2s, user:", user);

    return "done";
  }, { deferStream: true });

  return (
    <div>
      <h1>User Name: {user.name}</h1> {/* ❓ */}
      <h2>User Age: {user.age}</h2> {/* ❓ */}
      <h3>Data: {data()}</h3>
    </div>
  );
}