Using data from loader in head?

export const Route = createFileRoute("/tournament/$id")({
  component: TournamentPage,
  head: ({ loaderData }) => ({
    meta: [
      { title: loaderData?.tournament?.name ?? "Loading..." }
    ],
  }),
  loader: async ({ params }) => {
    const res = await fetchApi(`/tournament/${params.id}`)
    if (!res.ok) throw new Error("Failed to fetch tournament!")
    const tournament = await res.json() as ApiTournament
    return { tournament }
  },
})

function TournamentPage() {
  const { tournament } = Route.useLoaderData()
  return <TournamentComponent tournamentId={tournament.id} />
}

{ title: loaderData?.tournament?.name ?? "Loading..." } // Unsafe assignment of an error typed value.

loader: async ({ params }) => { // Type Promise<{ tournament: ApiTournament }> is not assignable to type Never

const { tournament } = Route.useLoaderData() // Placing a void expression inside another expression is forbidden. Move it to its own statement instead.