Error: useRoutes() may be used only in the context of a <Router> component

I’m adding React modules dynamically using System JS, and it works great!
Except if I try to use the react-router context from the loaded module.

"react-router-dom": "6.0.0-beta.0"

You can see in the react component explorer that there is definitely a <Router> component as an ancestor.
The routing works fine in the host application – it only breaks when called from a dynamically loaded component.

I’m a novice with React, so I could be making a wrong assumption of how the contexts are provided to deeply nested or dynamically loaded children.

enter image description here

Router is mounted here –
https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/frontend/apps/webapp/src/index.tsx#L204

Module is being loaded here –
https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/frontend/apps/webapp/src/features/plugins/AppRootPage.tsx#L84

The module element that throws the exception is here –
https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/backend/modules/forms/src/plugin/FormsRootPage.tsx#L47

Source: React Router Questions