I'm not able to resolve this routing issue of my react app after successfully deploying on vercel

i'm deploying my app through github on vercel

here's the link: website
on top right corner there's a Navigate button, it redirects to a different route but if you referesh the page it says 404 not found, same thing is happening in netlify, i'm thinking it has something to do with my vite configuration, i don't know :/

vite config:

import tsconfigPaths from "vite-tsconfig-paths";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    port: 4000,
  },
});

vite docs says not need for base:"/", which is by default.

main.tsx:

import React from "react";
import App from "./App.tsx";
import "@mantine/core/styles.css";
import "@mantine/carousel/styles.css";
import ReactDOM from "react-dom/client";
import { Provider } from "react-authbox";
import { theme } from "@/configs/theme.ts";
import { MantineProvider } from "@mantine/core";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MantineProvider theme={theme}>
      <Provider fetchUserUrl="http://localhost:3000/api/user">
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
    </MantineProvider>
  </React.StrictMode>
);

app.tsx:

import Routes from "@/routes/routes";

const App = () => <Routes />;

export default App;

Routes.tsx:

import AddBusinessInformationPage from "@/pages/client/addbusinessinformationpage";
import SelectCategoriesPage from "@/pages/client/selectcategoriespage";
import ProfileSetingsPage from "@/pages/client/profilesettingspage";
import { FormProvider } from "@/providers/formprovider";
import { Routes, Route } from "react-router-dom";
import ClientLayout from "@/components/layouts";
import HomePage from "@/pages/client/homepage";
import { FC } from "react";

const RoutesComponent: FC = () => {
  return (
    <Routes>
      <Route
        path="/"
        element={
          <FormProvider>
            <ClientLayout />
          </FormProvider>
        }
      >
        <Route index element={<HomePage />} />
        <Route path="profile-settings" element={<ProfileSetingsPage />} />
        <Route path="select-category" element={<SelectCategoriesPage />} />
        <Route
          path="/add-business-information"
          element={<AddBusinessInformationPage />}
        />
      </Route>
    </Routes>
  );
};

export default RoutesComponent;

i tried base: "/" which is by default.

Added the vercel.json file:

{
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/"
        }
    ]
}    

To redirect all the request to root destination where index.html is located which renders the main.tsx, the routing is handled by the client.

Each platform require there own way of re-write config.