Using one webpack project inside another with react hooks causes an error

There are three create-react-apps customised using react-app-rewired, both are using the same version of the following packages:

"react": "^16.12.0",
"react-app-rewired": "^2.1.5",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",

App 1, the “Main” application is a very simple shell for the other two apps, public/index.html kind of looks like so:

<body>
    <div class="main-app"></div>
    <div class="sub-app-1"></div>
    <div class="sub-app-2"></div>
    <script src="sub-app-1/static/js/bundle.js" async></script>
    <script src="sub-app-1/static/js/0.chunk.js" async></script>
    <script src="sub-app-1/static/js/main.chunk.js" async></script>
    <script src="sub-app-2/static/js/bundle.js" async></script>
    <script src="sub-app-2/static/js/0.chunk.js" async></script>
    <script src="sub-app-2/static/js/main.chunk.js" async></script>
</body>

This works well enough, all three apps are rendered correctly. Now the requirements have changed slightly where the one and only component from sub-app-2 for example <PictureFrame /> needs to be included in sub-app-1, I have created a stub component in the main project, like so:

const NullPictureFrame = () => {
    return <div></div>;
}

export const PictureFrame = (props: Props) => {
    const forceUpdate = useForceUpdate();
    useEventListener(window, "PictureFrameComponent.Initialized" as string, () => forceUpdate());

    const PictureFrame = window.PictureFrameComponent || NullPictureFrame;
    return <PictureFrame />
}

I don’t think the details of the hooks matter, but they do work when run in a stand alone fashion. The sub-app-2 does something similar to this

window.PictureFrameComponent = () => <PictureFrame />

which seems to work in theory, but in practice I end up with the following error

The above error occurred in the <PictureFrame> component:
    in PictureFrame (at src/index.tsx:17)
    in Router (at src/index.tsx:16)
    in Unknown (at PictureFrames/index.tsx:21)
    in PictureFrame (at src/index.tsx:32) <--- in `main-app`

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries. index.js:1
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.

main-app and sub-app-2 are loading two different versions of react and this is causing an issue when using hooks.

I have tried to update my webpack config based on the advice in this github thread but it appears that sub-app-2 cannot find the reference to react using this approach. My main-app/config-overrides.js looks like so:

config.resolve.alias["react"] = path.resolve(__dirname, "./node_modules/react");
config.resolve.alias["react-dom"] = path.resolve(__dirname, "./node_modules/react-dom");

and my sub-app-1/config-overrides.js looks like so:

config.externals = config.externals || {};
config.externals.react = {
    root: "React",
    commonjs2: "react",
    commonjs: "react",
    amd: "react"
};
config.externals["react-dom"] = {
    root: "ReactDOM",
    commonjs2: "react-dom",
    commonjs: "react-dom",
    amd: "react-dom"
};

Which results in no errors, but also the code from sub-app-2 not being initialised by webpack as react/react-dom cannot be found

Source: ReactJs