Why the webpages of my website are not appearing on deployment? - github

Question

I am deploying my react website through Github pages. Upon clicking on the deployed URL I am getting the following content (similar to github description of commands):
Can someone point out where I am going wrong?
package.json:
{
"homepage": "https://vats101.github.io/hack/",
"name": "hack",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.8.8",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#firebase/app-compat": "^0.1.25",
"#firebase/auth-compat": "^0.2.14",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"firebase": "^9.8.1",
"framer-motion": "^6.3.3",
"react": "^18.1.0",
"react-bootstrap": "^2.3.1",
"react-dom": "^18.1.0",
"react-icons": "^4.3.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
}
}
My website link:
https://vats101.github.io/hack/
This is my App.js file where all routing is done:
import './App.css';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Homepage from './Pages/Homepage';
import {BrowserRouter as Router,Routes,Route,Link} from 'react-router-dom'
import {useState,useEffect} from 'react'
function App() {
const [userName,setUserName]=useState(null);
return (
<div className="App">
<Routes>
<Route path='/' exact element={<><Homepage username={userName} setusername={setUserName} /></>}></Route>
<Route path='/hack/' exact element={<><Homepage username={userName} setusername={setUserName} /></>}></Route>
<!-- other routes also -->
</Routes>
</div>
);
}
export default App;