How to make React useParams (router) work with Angular router in a micro-frontend project?

Question

We have an Angular 1.0 project. A separate new React project repo was created and then imported into Angular via single-spa. Single-spa keeps throwing 227 status errors and we can't fix that. So instead, we want to migrate the new React project directly into the old Angular project. This has been successfully done using react2angular. However, there are React pages that use useParams() from 'react-router-dom' to extract the :id from the url and call apis with that value. The problem is that the apis are called twice now. I suspect it's because the app goes through 2 routers (Angular and React) and triggers a second hard re-render of the page which calls the apis again after it extracts the :id from the url.

I tried ui-router/react-hybrid, but that doesn't seem to recognize useParams without the components being wrapped with a React Router. So it's basically the same as react2angular. Is there a way to avoid the double api calls, assuming it's the double router? Or, with react-hybrid, am I supposed to wrap the React components with <UIRouter> instead of just deleting <BrowserRouter>?

Or is there another way to pass the match.params to the component without the React Router? For example, can the dynamic matched param values be captured on the Angular side and be passed to the React component as props?