[Bug]: useOutlet returns an incorrect value when inside nested React.createPortal's

[numso]

What version of React Router are you using?

6.28.0

Steps to Reproduce

https://stackblitz.com/edit/github-22gxxd?file=src%2Fcomponents%2Fmodal.jsx

• Open the above example.
• Click on the letters A, B, C, and D in different orders to navigate between routes.
• Notice that navigating from A -> D, B -> D, D -> B, and D -> A are all buggy transitions.
• If you remove the call to ReactDOM.createPortal in modal.jsx, those transitions then work.

I left a console.log in animated-outlet.jsx that fires when an outlet is rendered but shouldn't be. This is a screenshot of the log emitted when going from D (/a/c/d) to A (/a). In this case I am component C (mounted at /a/c) and am rendering my child outlet (which totally exists) D, (mounted at /a/c/d) but useMatches only knows about / and /a.

Expected Behavior

The animation between routes A <--> D and between routes B <--> D should be smooth.

Actual Behavior

When going from route A/B --> D: route D pops in without any animation.
When going from route D --> A/B: route D animates out while a clone of route D animates in, then disappears.