Remove # Hash from URL in React with React Router

Question

I want to remove the # Hash from the url using React Router dom. I came across the solution of putting the browserrouter around the switch with the routes, which seems to only work when you change between tabs, but when reloading or loading the site initially the # still appears

My Router Code

return (
<BrowserRouter>
<Switch>
  {!authCtx.isLoggedIn && (
    <Route
      exact
      path="/"
      component={() => (
            <Home />
      )}
    />
  )}
  {!authCtx.isLoggedIn && (
    <Route path="/Login" component={() => <Login />} />
  )}
  {authCtx.isLoggedIn && (
    <Route
      path="/EmployeeHome"
      component={() => (
          <EmployeeHome />
      )}
    />
  )}
  {authCtx.isLoggedIn && (
    <Route path="/Appointment">
      <Redirect to="/EmployeeHome" />
    </Route>
  )}
  {authCtx.isLoggedIn && (
    <Route path="/Documentations" component={() => <Documentations />} />
  )}
  {authCtx.isLoggedIn && (
    <Route
      path="/Statistic"
      component={() => (
          <Statistics />
      )}
    />
  )}

  <Route path="*">
    {authCtx.isLoggedIn && <Redirect to="/Appointment" />}
    {!authCtx.isLoggedIn && <Redirect to="/" />}
  </Route>
</Switch>
</BrowserRouter>);