React: How to run one app inside shadow dom of main app?

For context, I am using vite, but I believe the issue would be the same with next.js.

With React, I have my “main app” and “module app” for example chat client. I don’t want to use iframe of “module app” inside “main app” or make static build of “modeule app” and insert it as /public static lib and also I don’t want to merge their components, libs, public files to single app.
Is there solution to use second app as a component with own dependencies, public, src, tsconfig and so on?
May be like using

    <div id="app"></div>
    <div id="module_app"></div>

inside index.html or

    <div id=“module_app”></div>

somewhere deeper in react app?
And of course shadow root is needed here to escape apps global styles.

The scenario of a question is I have many standalone apps as a web chat, picture editor, accounting documents creator, server monitoring and more, each of them has own git repo. Each of them perfecly works as standalone app and now I need to use some of them as part of main app.