React App + GH Pages + Routes & Authorization shows 404 page

I have a react application, which has Routes in it and Authorization module from Firebase. I deployed simple React apps to GH-Pages before successfully. Watch a tutorial on YT and tried to deploy the current app with HashRouter and BrowserRouter - no success.

How to deploy it correctly? GitHub, Google provides no answer that will help me.

Git: https://github.com/TyroniUA/X-Culture

Package.json

"homepage":"https://tyroniua.github.io/X-culture/",
"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "predeploy": "npm run build",
    "deploy":"gh-pages -d build"
  },

App.JS where Auth & Routes:

import { HashRouter as Router, Switch, Route } from "react-router-dom"
import { AuthProvider } from "./FireBase/Auth";

/// some imports later 

function App() {
  return (
    <AuthProvider>
    <Router>

        <NavBar title='volodymyr' />
        <Switch>

          <Route path='/' exact render={(props) => <Main/>} />
          <Route path='/admin' exact component={Admin} />
          <PrivateRoute path='/AdminDashboard'exact component={AdminDashboard} />
          <Route path='/training' component={Training} />
          <Route path='/business' component={Business} />
          <Route path='/research' component={Research} />
          <Route path='/coach' component={Coach}/>
          <Route path='/team' component={Team} />
          <Route path='/symposium' component={GSymp}/>
          <Route path='/blog' component={Blog} />
          <Route path='/winners' component={Winners} />
          <Route path='/hackaton' component={Hackaton} />
        </Switch>
        <Footer />
    </Router>
    </AuthProvider>

  );
}

Any help, please? I’m still stuck with that issue and cannot understand how to make it work. Maybe I’m using a wrong approach?