How can I make browserRouter work within a react app on SCORM?

Question

I'm trying to upload a react app on SCORM cloud which has a homepage and a feature page and a link on the homepage should redirect to the feature page. Within the app I use BrowserRouter for navigation and it works perfectly however when I upload the zip file that was created with simple-scorm-packager on the scorm cloud and launch the app I get an empty screen. How do I get the Home page to show and naviagation to work?

This is my imsmanifest.xml file:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<manifest identifier="A.App.WebApp.fab88f79-a6e5-4498-82e5-3ec46b0ac5f4" version="1" xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2" xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd http://www.imsglobal.org/xsd/imsmd_rootv1p2p1 imsmd_rootv1p2p1.xsd http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd">
  <metadata>
    <schema>ADL SCORM</schema>
    <schemaversion>1.2</schemaversion>
    <adlcp:location>metadata.xml</adlcp:location>
  </metadata>
  <organizations default="App">
    <organization identifier="Web App">
      <title>Web App</title>
      <item identifier="item_A.App.WebApp.fab88f79-a6e5-4498-82e5-3ec46b0ac5f4" identifierref="resource_A.App.WebApp.fab88f79-a6e5-4498-82e5-3ec46b0ac5f4">
        <title>Web App</title>
        <adlcp:masteryscore>80</adlcp:masteryscore>
        <metadata>
          <schema>ADL SCORM</schema>
          <schemaversion>1.2</schemaversion>
          <adlcp:location>metadata.xml</adlcp:location>
        </metadata>
      </item>
      <metadata>
        <schema>ADL SCORM</schema>
        <schemaversion>1.2</schemaversion>
        <adlcp:location>metadata.xml</adlcp:location>
      </metadata>
    </organization>
  </organizations>
  <resources>
    <metadata>
      <schema>ADL SCORM</schema>
      <schemaversion>1.2</schemaversion>
      <adlcp:location>metadata.xml</adlcp:location>
    </metadata>
    <resource identifier="resource_A.App.WebApp.fab88f79-a6e5-4498-82e5-3ec46b0ac5f4" type="webcontent" href="index.html" adlcp:scormtype="sco">
      <metadata>
        <schema>ADL SCORM</schema>
        <schemaversion>1.2</schemaversion>
        <adlcp:location>metadata.xml</adlcp:location>
      </metadata>
      <file href="asset-manifest.json"/>
      <file href="audio/1.mp3"/>
      <file href="audio/2.mp3"/>
      <file href="audio/3.mp3"/>
      <file href="favicon.ico"/>
      <file href="index.html"/>
      <file href="myscript.js"/>
      <file href="logo192.png"/>
      <file href="logo512.png"/>
      <file href="manifest.json"/>
      <file href="robots.txt"/>
      <file href="static/css/main.e26aa2c9.css"/>
      <file href="static/css/main.e26aa2c9.css.map"/>
      <file href="static/js/787.5344bfe5.chunk.js"/>
      <file href="static/js/787.5344bfe5.chunk.js.map"/>
      <file href="static/js/main.7c1bdf4f.js"/>
      <file href="static/js/main.7c1bdf4f.js.LICENSE.txt"/>
      <file href="static/js/main.7c1bdf4f.js.map"/>
      <file href="static/media/1.84efd95c203b4d660b46.mp3"/>
      <file href="static/media/2.6b918989664a0becd5b0.mp3"/>
      <file href="static/media/3.0bda059a841820d3ff4e.mp3"/>
    </resource>
  </resources>
</manifest>

and this is my App.js

import './App.css';
import Home from './components/Home';
import {Routes, Route} from 'react-router-dom'
import Feature from './components/Feature';

function App() {
  return (
    <div className="App">
        <Routes>
          <Route path="/" element={
          <Home/>
          } />
          <Route
            path="/feature"
            element={
            <Feature/>
            }
          />
          </Routes>
    </div>
  );
}
export default App;