How do you handle circular typescript references? | TanStack | Page 1

I'm using payloadcms on the back, tanstack start on the front.

import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { sdk } from '@/lib/payload'

const getTeam = createServerFn({ method: 'GET' })
    .inputValidator((id: string) => id)
    .handler(async ({ data: id }) => {
        const team = await sdk.findByID({
            collection: 'teams',
            id,
            depth: 1,
            select: { name: true, logo: true },
        })

        return team
    })

export const Route = createFileRoute('/app/_layout/team')({
    loader: ({ context }) => {
        return getTeam({ data: context.session.activeTeamId! })
    },
    component: RouteComponent,
})

function RouteComponent() {
    const team = Route.useLoaderData()
    return <div>{team.name}</div>
}

Trying to fetch a team. A team has a logo (type = Media). The Media collection has a Team reference. So i have circular references.

export interface Team {
  ...etc etc
  logo?: Media | null;

}

export interface Media {
  ...etc etc
  team?: (string | null) | Team;
}

error:

Argument of type '({ data: id }: ServerFnCtx<Register, "GET", undefined, (id: string) => string>) => Promise<{ id: string; name: string; logo?: Media | null | undefined; }>' is not assignable to parameter of type 'ServerFn<Register, "GET", undefined, (id: string) => string, Promise<{ id: string; name: string; logo?: Media | null | undefined; }>>'.
  Type 'Promise<{ id: string; name: string; logo?: Media | null | undefined; }>' is not assignable to type 'Promise<ValidateSerializableMapped<{ id: string; name: string; logo?: Media | null | undefined; }, RegisteredSerializableInput<Register>>>'.
    Type '{ id: string; name: string; logo?: Media | null | undefined; }' is not assignable to type 'ValidateSerializableMapped<{ id: string; name: string; logo?: Media | null | undefined; }, RegisteredSerializableInput<Register>>'.
      Types of property 'logo' are incompatible.
        Type 'Media | null | undefined' is not assignable to type 'ValidateSerializableMapped<Media, RegisteredSerializableInput<Register>> | null | undefined'.
          Type 'Media' is not assignable to type 'ValidateSerializableMapped<Media, RegisteredSerializableInput<Register>>'.
            Types of property 'team' are incompatible.
              Type 'string | Team | null | undefined' is not assignable to type 'string | ValidateSerializableMapped<Team, RegisteredSerializableInput<Register>> | null | undefined'.
                Type 'Team' is not assignable to type 'string | ValidateSerializableMapped<Team, RegisteredSerializableInput<Register>> | null | undefined'.

#How do you handle circular typescript references?