I'm using tanstack with a react app and am testing the Await component with a promise. I'm following the guide here:

const getLists: () => Promise<FLMList[]> = async () => {
    return new Promise<FLMList[]>(s => {
        setTimeout(
            () => s(flm_lists),
            8000
        )
    })
}

export const Route = createFileRoute('/flm')({
    component: RouteComponent,
    loader: async () => getLists()
})

function RouteComponent() {
    const flmLists = Route.useLoaderData()
    return (
        <Await promise={flmLists} fallback={<div>Loading...</div>}>
            {(data) => {
                return <FLMListTable flmLists={data} isSortable={true} title={'FLM list definitions'} />
            }}
        </Await>
    )
}

It does not render the Loading... div and then after 8 seconds when my promise resolves I get an error that is empty on the screen. The console gives me 2 warnings:

Warning: The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute! tiny-warning.esm.js:11:14

Warning: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The error on the screen just says "Something went wrong!" with a "Hide Error" button and an empty red outline.

This is a contrived example, but works if I remove the Await component and if I await the promise in the loader method like this:

export const Route = createFileRoute('/flm')({
    component: RouteComponent,
    loader: async () => await getLists()
})

function RouteComponent() {
    const flmLists = Route.useLoaderData()
    return (
        // <Await promise={flmLists} fallback={<div>Loading...</div>}>
        //     {(data) => {
                 <FLMListTable flmLists={flmLists} isSortable={true} title={'FLM list definitions'} />
        //     }}
        // </Await>
    )
}

What am I doing wrong with the first one?