My live site throws error with React Router Dom, but kinda works in my local host

Question

I am trying to finish my personal portfolio site that I am building with vite Reactjs, I am having trouble with react-router-dom, I have some components, most of them on a single page but I wanted to try Router, so I tried to implement it with About component, but its kinda working in local host and shows "page not found" on live lite when I click on about!! [My site][https://mjshubham21.live/]

I tried quite a few things with Routes, but it keeps breaking and the live site err, "Page not found" persists!!

//My App component:
import React from "react";
import NavBar from "./NavBar";
import Intro from "./Intro";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

  return (
    <>
      <Router>
        <Routes>
          <Route exact path="/" element={<NavBar />}></Route>
          <Route exact path="/about" element={<About />}></Route>
        </Routes>
        <Intro />
      </Router>
    </>
  );
}

export default App; //I only kept related components here.

//My NavBar component:
import React from "react";
import { Link } from "react-router-dom";
function NavBar() {
  return (
    <>
      <nav>
        <div className="itemL">
          <Link to="#">mjshubham21</Link>
        </div>
        <div className="itemR">
          <ul>
            <li>
              <Link to="#">Home</Link>
            </li>
            <li>
              <Link to="/about" target="_blank">
                About Me
              </Link>
            </li>
          </ul>
        </div>
      </nav>
    </>
  );
}

export default NavBar;```