Focus gets lost or stuck when moving between React apps

When moving between two React apps, focus gets lost. When manually resetting focus as a workaround, focus styles get stuck.

Background
My team has this use-case since we render a modal component that is provided by an SDK (In-App Feedback SDK, owned by another MS team). Both our hosting app and their component app are built with Fluent v9 and React.

Repro
Here is a sandbox repro of the focus getting lost: https://codesandbox.io/p/sandbox/26d99q

Here is the repro in our app of focus styles getting stuck:

• Go to login.live.com or signup.live.com
• Select "Help and feedback" in the footer at the bottom of the page
• Tab to "Give feedback" and hit enter
• Tab to close the modal, either through "Cancel" button or the "X" button

Attempted solutions
In our app, you can observe that we tried manually setting focus after the modal closes. We call linkRef.current.focus() on the "Give feedback" link and pass this to the modal component as an onClose callback. This does work to regain focus, but the styles lag behind and never move off of the "Give feedback" link.

I also tried using the Fluent utilities useRestoreFocusSource and useRestoreFocusTarget to reset focus. It had the same effect.

Start with the CodeSandbox focus-loss reproduction and compare it with the login.live.com modal flow. Read the reported focus restoration behavior, including the attempted linkRef.current.focus() callback and Fluent useRestoreFocusSource/useRestoreFocusTarget utilities. Done means focus returns correctly when moving between the two React apps and focus styles no longer remain stuck on the Give feedback link.