React router working fine on localhost but does not redirect me properly on netlify? [duplicate]

My App is working perfectly on http://localhost:3000/ but when I try to run it on Netlify (https://famous-swan-6a778d.netlify.app/) the homepage loads correctly, but when I try to go to some other page it shows the Page Not Found error.

My routing is set up as:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import Dashboard from "./components/Dashboard";
import EncryptedMessage from "./components/EncryptedMessage";
import NotFound from "./components/NotFound";
import Navbar from "./components/Navbar";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Dashboard />}></Route>
        <Route
          path="/messages/:uniqueId"
          element={<EncryptedMessage />}
        ></Route>
        <Route path="*" element={<NotFound />}></Route>
      </Routes>
    </Router>
  );
}

export default App;

The / is working perfectly, but when I try to go to say https://famous-swan-6a778d.netlify.app/messages/123/ , it throws an error but if I go to http://localhost:3000/messages/123/ , it's working fine.

How do I fix this?