React-router-v6 cannot get page on refresh

I have routes like this

import React from "react"
import { Routes, Route } from "react-router-dom"
...

export default function App() {
  return (
    <div className="App">
          <div className="content">
            <Routes>
              <Route path="/projects" element={<Projects/>} />
              <Route path="/projects/:id" element={<ProjectsDetails/>}/>
              <Route path='*' element={<NotFound />} />
            </Routes>
          </div>
    </div>
  );
}

I can navigate this routes without any problem. If I refresh page on "/projects", is also not a problem.

I can navigate "/projects/1" without any problem. But If I refresh page in there, I get an error "GET http://localhost:9200/projects/bundle.js net::ERR_ABORTED 404 (Not Found)"

There is no problem in main routes but it is problem in url with params (when page refresh).

How can I solve this?

Edit

 webpack.config

    ...
    devServer: 
   {
            port: 9200,
            contentBase: path.join(__dirname, "/dist"),
            hot: true,
            watchContentBase: true,
            historyApiFallback: true,
    },
    ...

Live on CodeSandBox

I did not encounter any problems in the demo here. It seems the problem is in my config.

Solution

With Валера Битковский's suggestion, I added

<base href="/">

in index.html file.