Micro Frontend with React and a normal html/css/js

I am trying to implement Micro Frontend Architecture where the html/css/js application is the main application and the React application must be embedded inside it.
I don’t want to implement it using iframes.

const App = () => {

    const navigate=useNavigate();
    const location=useLocation();
    
    const logout=()=>{
        localStorage.removeItem("name");
        Cookies.remove("token");
        localStorage.removeItem("groupId");
        navigate("/");
    }

    return (
        <>
            {location.pathname!=="/" && location.pathname!=="/register" && 
                <>
                    <button onClick={logout}>Logout</button>
                    <select name='mytenants' id='mytenants'>
                        
                    </select>
                </>// marked
            }
            <Routes>
                <Route path="/" element={<Login></Login>}></Route>
                <Route path="/message" element={<ProtectedRoute><WebSocketComponent></WebSocketComponent></ProtectedRoute>}></Route>
                <Route path="/register" element={<SignUp></SignUp>}></Route>
                <Route path='/message/:reciver' element={<ProtectedRoute><WebSocketComponent></WebSocketComponent></ProtectedRoute>}></Route>
                <Route path="/message/group" element={<ProtectedRoute><GroupChat></GroupChat></ProtectedRoute>}></Route>
                <Route path="/message/group/:group" element={<ProtectedRoute><GroupChat></GroupChat></ProtectedRoute>}></Route>
                <Route path="/registeruser" element={<ProtectedRoute><RegisterUser></RegisterUser></ProtectedRoute>}></Route>
            </Routes>
        </>
    );
};

export default App;

This is my App.js of my react application.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

This is my Index.js

I tryed to wrap the App.js using the Web Component and the use it in my html/css/js application but it didn’t work out.

class ReactMicroFrontend extends HTMLElement
{
    connectedCallback()
    {
        const shadowRoot=this.attachShadow({mode:"open"});

        const mountPoint=document.createElement('root');
        shadowRoot.appendChild(mountPoint);

        ReactDOM.render(
            <React.StrictMode>
            <BrowserRouter>
                <App />
            </BrowserRouter>
            </React.StrictMode>
            ,
            mountPoint
        );
    }

    disconnectedCAllback()
    {
        ReactDOM.unmountComponentAtNode(this.shadowRoot.querySelector('root'));
    }
}

customElements.define('react-microfrontend', ReactMicroFrontend);

This was the wrapper component.

I don’t want to use any frameworks like Single-SPA to implement it.
I want to implement it using plain javascript.
Is there any possible way to achieve it?