I'm trying to make an authentication on django-react web and came across this tutorial on youtube https://www.youtube.com/watch?v=BxzO2M7QcZw&t=2907s There is an object called app that contain provider which wrap a components and define a store. In that tutorial, app is called inside render function in index.js file. Below is the code

const app = (
    <Provider store={store}>
        <App />
    </Provider>
)

ReactDOM.render(app, document.getElementById('root'));
registerServiceWorker();

I'm trying to follow this tutorial but i have a different format of index.js because i create all my routing path inside it while the tutorial create the route inside app.js. My question is, where should i put the app object if i have a code like this inside my index.js file?

const composeEnhances = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(reducer, composeEnhances(
    applyMiddleware(thunk)
));

const app = (
    <Provider store={store}>
        <Homepage></Homepage>
        <SportsSearch></SportsSearch>
    </Provider>
)

const sports_dict = ['futsal', 'badminton', 'basket', 'sepak-bola', 'voli', 'tenis', 'billiard', 'tenis-meja']

render(
  <BrowserRouter>
    <Routes>
    <Route path="/" element={<Homepage />} />
        <Route path="/R1" element={<RecommendationOne />} />

        {sports_dict.map(sport => {
            return (
                <Route path={`/${sport}`} element={<SportsSearch variable={sport} />} />

            )
        })}
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

I have tried to put my app inside render but i get an error of Error: Target container is not a DOM element. below code is what i've tried

render(
  app,
  <BrowserRouter>
    <Routes>
    <Route path="/" element={<Homepage />} />
        <Route path="/R1" element={<RecommendationOne />} />

        {sports_dict.map(sport => {
            return (
                <Route path={`/${sport}`} element={<SportsSearch variable={sport} />} />

            )
        })}
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);