I have these two ReactDOM renders to merge into single ReactDOM, having difficulties in merging.

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </BrowserRouter>
  </Provider>,
  document.getElementById('app'),
);


ReactDOM.render(
  <React.Fragment>
    <Suspense fallback={<div />}>
      <Router basename={`/`}>
        <Route render={({ location }) => (location.state && location.state.is404 ? <Error404 /> : <App1 />)} />
      </Router>
    </Suspense>
  </React.Fragment>,
  document.getElementById("root")
);