React Router DOM Issue: Blank Root Page in Outlook Office Add-in

Question

I'm working on an Outlook Office add-in, and I've found out that React-Router-DOM only supports v5 or lower in add-ins. I've installed it and also provided the code below. The issue I'm facing is that the "/" page doesn't display anything. The page is completely blank, while other routes are working fine.

import * as React from "react";
import PropTypes from "prop-types";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import UploadFile from "./UploadFile";
import Options from "./Options";
import Login from "./Login";

function App() {
  // Check if the user is logged in
  const isLoggedIn = sessionStorage.getItem("isLoggedIn") === "true";

  return (
    <Router>
      <main>
        <h1>App Title</h1>
        <Switch>
          <Route exact path="/">
            <Redirect to="/OP" />
          </Route>
          <Route path="/UP">
            <UploadFile />
          </Route>
          <Route path="/OP">
            <Options />
          </Route>
        </Switch>
      </main>
    </Router>
  );
}

export default App;