Async Await Issues

import { createRouteData, useParams, useRouteData } from "solid-start";
import { IconNumberBox } from "~/components/IconNumberBox";
import { fetchSummoner2 } from "~/server/api/queries";

interface ISummonerData {
  id: string;
  accountId: string;
  puuid: string;
  name: string;
  profileIconId: number;
  revisionDate: number;
  summonerLevel: number;
}

export function routeData() {
  const params = useParams();
  return createRouteData(async () => {
    const response = await fetchSummoner2(params.summonerName);
    return (await response.json()) as ISummonerData;
  });
}

export default function SummonerDetails() {
  const summonerData = useRouteData<typeof routeData>();
  console.log(summonerData()); //if i remove this line, I never resolve
  return (
    <div class="inline">
      <IconNumberBox profileIconId={summonerData()?.profileIconId} />
    </div>
  );
}

export const fetchSummoner2 = server$((summonerName) =>
  fetch(
    `https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${summonerName}/`,
    {
      headers: {
        "X-Riot-Token": "API KEY",
      },
    },
  ),
);