Nested CatchBoundaries not getting called on router 404

I have a simple hierarchy like so:

root.tsx (CatchBoundary A)
routes
| main
| | index.tsx
| index.tsx (redirects to /main) (CatchBoundary B)
| main.tsx (CatchBoundary C)

I can navigate to /main and see my DOM correctly root -> main -> main/index

Now, when trying a route that does not exist: /main/foo, I would expect the CatchBoundary inside main.tsx (CatchBoundary C) to handle the error. Instead, the error bubbles all the way up to root CatchBoundary A. It skips CatchBoundary C and B.

Removing CatchBoundary A will result in an “unhandled thrown response” error.

Each CatchBoundary is declared the same way:

export function CatchBoundary() {
    console.log('[A/B/C]');
    return (<p>Caught at [A/B/C]</p>);
}

ErrorBoundaries, on the other hand, work as expected. Throwing within loader() will correctly stop at the nearest ErrorBoundary (written similarly).