React projects works fine in local host, but is blank in gh-pages

I am working on a react project that worked but would not start from the right page. To fix that, I decided to rename a react component with the same name as the gh repo of the project. That was the Notebook(now Note). Initially, gh-pages would start from the Notebook(now Note) component, not the Login component. However, after the name change from NOtebook to Note, now gh-pages starts at a blank page (it loads nothing), while it works wonders on my computer when I launch the app. I have read a lot of comments online about changes in the package.json file and did them, but unsuccessfully; any help would be appreciated! Also, please feel free to reach out to me with any questions.

package.json

{
  "name": "notebook",
  "version": "0.1.0",
  "private": true,
  "homepage" : "https://thewizard91.github.io/notebook/",
  "dependencies": {
    "@googlemaps/react-wrapper": "^1.1.18",
    "@reduxjs/toolkit": "^1.7.1",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^5.2.1",
    "firebase": "^9.9.4",
    "gulp": "^3.9.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.5.0",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "^2.1.8",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.4",
    "serve": "^14.2.0",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build -b gh-pages",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm run build"
  },
  "heroku-run-build-script": true,
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.2.3"
  },
  "engines": {
    "node": "16.18.1",
    "npm": "8.19.2"
  }
}

When visiting your web page, I see a lot of network requests return 404, particularly for babel and firebase resources.

Could you check that those resources were committed to the gh-pages branch.

I found a cheap fix. I noticed that when I deploy the project on gh-pages, the app's body is not loaded. Meaning all the components within the <Routes></Routes> were not loaded when you launched the app (only in the local host it works). So what I did was add a navbar on top of the <Routes></Routes> segment, and inside of the <Navigation />, I have the link to the homepage (login page) (the component that I intended to start the app with; so upon the click to the link I get what I want. Here is the code. Please feel free to comment for further clarification, maybe I can be clearer:)!

class App extends Component {
  render() {
    return (
      <Container 
        id = "AppId"
        className = "d-flex align-items-center justify-content-center">
          <div className = "w-100"> {/*className = "w-100"*/}
              <Router>
                <Navigation/>
                <AuthProvider>
                  <Routes>
                    <Route exact path="/dashboard" element={<Dashboard />}/>
                    {/* <Route exact path='/' element={<PrivateRoute/>} >
                      <Route exact={true}  path='/login' element={<LogIn/>}/>
                    </Route> */}
                    <Route path='/update-profile' element={<UpdateProfile/>}/>
                    <Route path="/signup" element={<SignUp/>}/>
                    <Route path="/login" exact={true} element={<LogIn/>}/>
                    <Route path="/forgot-password" element={<ForgotPassword/>}/>
                    <Route path="/note" element={<Note/>}/>
                    <Route path = "/mainpage" element={<MainPage/>}/>
                    <Route path = "/new" element={<New/>}/>
                  </Routes>
                </AuthProvider>
              </Router>
          </div>
      </Container>
    );
  }
}

export default App;