Await should not catch child errors

[msc117]

My use case seems like it should be the component default and I'm needing to make a wrapper to add this logic.

I have a loader that provides a deferred promise like so

async loader() {
   const data = fetch('/api');
   return {data};
}

function Component() {
    const {data} = useLoaderData();
    return (
        <Suspense fallback={<Loading />}>
            <Await resolve={data} errorElement={<>Data failed to load!</>}>
                <NestedChildren />
            </Await>
        </Suspense>
    );
}

I have a route errorElement defined that is well designed for uncaught exceptions "something went wrong". In the case where data fails to load I want to show the Await errorElement. But in the case where there's a render error in the child components, I do not want the Await errorElement but rather to bubble up to my route error.

It seems strange to me the Await acts as a react tree error boundary when it should just monitor the resolve status.

This is the simple wrapper code I have I'd like to submit to master

import {AwaitProps, Await as RouterAwait} from 'react-router';

export function Await(props: AwaitProps) {
    const [promiseResolved, setPromiseResolved] = useState(false);
    useEffect(() => {
        if (props.resolve) {
            props.resolve.then(() => {
                setPromiseResolved(true);
            }).catch(() => {});
        }
    }, [props.resolve]);
    if (promiseResolved) {
        return <RouterAwait {...props} errorElement={undefined} />;
    }
    return <RouterAwait {...props} />;
}

[msc117]

Any update on this? I can make a PR, but wanted to ensure this change was acceptable to the community. I can introduce this behind a new prop like onlyCatchResolveError