How to define routes in express when using react with react-router-dom?

I have a react app, using react-router-dom looking something like this:
trying to create a MERN project for myself using React , Express, MongoDB and Node..

function App() {

  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<SignIn/>} />
          <Route path="/alltask" element={<AllTask/>} />
          <Route path="/mytask" element={<MyTask/>} />
          <Route path="/newtask" element={<NewTask/>} />
          <Route path="/history" element={<History />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

when i run the app i can see the paths in the url properly looking like: localhost:3000/alltask no problem.
i want to combine my app with express, so i ran npm run build. and after i use express.static on the build folder, my project works on express.

problem is when i try to hard type in the url “localhost:3000/alltask” , i get “Cannot GET /alltask”.

i fix it by using

app.get("*", (req, res) => {
    res.sendFile(__dirname + "/task/build/index.html");
})

but now when i hard type the URL i get a blank page. what is the problem? what am i doing wrong?
cant find anything on the web about this.

I tried using app.use instead of app.get to server the index.html , i dunno what else can be done..