React router dom working locally but not once deployed

Question

I am currently trying to deploy a site. The site is being deployed from my github, while using a custom domain through godaddy.

Everything routes fine locally, only doing a landing ('/') page to home ('/home').

The problem is once deployed it can access the landing ('/') but gives a 404 error for ('/home').

Sorry if this isn't explained well, english is not my first language.

My App.js

import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Landing from "./Pages/Landing";
import Home from "./Pages/Home";


function App() {

  return (
    <Router>
    <Routes>
      <Route path="/" element={<Landing />} />
      <Route path="/home" element={<Home />} />
    </Routes>
    </Router>
  );
}

export default App;

my index.js

import ReactDOM from 'react-dom';
import '.';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import './assets/styles/style.css';
import 'semantic-ui-css/semantic.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

reportWebVitals();

my package.json `

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://nameremovedforprivacy.github.io/",
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@material/react-card": "^0.15.0",
    "@mui/joy": "^5.0.0-alpha.62",
    "@mui/material": "^5.11.4",
    "@mui/styled-engine-sc": "^5.11.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.1",
    "bulma": "^0.9.4",
    "compass": "^0.1.1",
    "css3": "^0.0.1",
    "distortion-effect-carousel": "^1.1.0",
    "emailjs-com": "^3.2.0",
    "gsap": "^3.11.4",
    "hover-effect": "^1.1.0",
    "install": "^0.13.0",
    "mdb-react-ui-kit": "^5.1.0",
    "mdbreact": "^5.2.0",
    "npm": "^9.3.0",
    "react": "17.0.2",
    "react-devicon": "^0.1.9",
    "react-dom": "17.0.2",
    "react-particle-effect-button": "^1.0.1",
    "react-random-reveal": "^2.0.0",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^6.6.2",
    "react-scripts": "5.0.1",
    "semantic-ui-css": "^2.5.0",
    "semantic-ui-react": "^2.1.3",
    "styled-components": "^5.3.6",
    "sweetalert2": "^11.6.1",
    "three": "^0.148.0",
    "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",
    "eslint": "eslint src"
  },
  "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": {
    "@babel/core": "^7.20.12",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-syntax-class-properties": "^7.12.13",
    "@babel/plugin-syntax-class-static-block": "^7.14.5",
    "eslint": "^8.23.1",
    "gh-pages": "^4.0.0"
  },
  "resolutions": {
    "@babel/preset-env": "7.5.5"
  }
}