SolidStart is it possible to make `load` function on Solid Router async?

My code seems to be working already but I still can't use the data that was loaded as a data that can be used for hydration. (It's not on the returned .html)

I followed the instructions on here: https://github.com/solidjs/solid-router?tab=readme-ov-file#data-functions--useroutedata

Any tips on this?

export const route = {
  load: () => {
    const [user] = createResource(async () => {
      const event = getRequestEvent();

      const client = initTRPCSSRClient(event?.request.headers!, event?.response.headers!);
      const response = await client.currentUser.query();
      return response.user ?? null;
    });

    return {
      user: user,
    };
  },
} satisfies RouteDefinition;

export default function DashboardPage(props: { data: any }) {
  const { user, hydrateUser } = useAuthContext();
  hydrateUser(props.data.user());

  const { height, width } = useWindowSize();

  return (
    <>
      {/* <ProtectedRoute> */}
      {/* <div>{JSON.stringify(props.data.user())}</div> */}
      <div class="flex flex-col gap-y-4">
        Dashboard: {user()?.username}
        <div>
          Window Size: {width()} x {height()}
        </div>
        <div>
          mySignal:
          {JSON.stringify(props)}
        </div>
      </div>
      {/* </ProtectedRoute> */}
    </>
  );
}

export const route = {
  load: () => {
    const [user] = createResource(async () => {
      const event = getRequestEvent();

      const client = initTRPCSSRClient(event?.request.headers!, event?.response.headers!);
      const response = await client.currentUser.query();
      return response.user ?? null;
    });

    return {
      user: user,
    };
  },
} satisfies RouteDefinition;

export default function DashboardPage(props: { data: any }) {
  const { user, hydrateUser } = useAuthContext();
  hydrateUser(props.data.user());

  const { height, width } = useWindowSize();

  return (
    <>
      {/* <ProtectedRoute> */}
      {/* <div>{JSON.stringify(props.data.user())}</div> */}
      <div class="flex flex-col gap-y-4">
        Dashboard: {user()?.username}
        <div>
          Window Size: {width()} x {height()}
        </div>
        <div>
          mySignal:
          {JSON.stringify(props)}
        </div>
      </div>
      {/* </ProtectedRoute> */}
    </>
  );
}