react-dom-router version 6 heroku

I was trying to create nested routes for react app that should be deployed on Heroku. I have a static.js with lines of codes:

{
    "root": "build/",
    "routes": {
      "/**": "index.html",
      "/posts/**": "index.html",

    }
  }

The app component as follows:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import { GetPosts } from "./store/services/DataSource";

import Home from "./Home";
import Posts from "./posts/Posts";
import Dashboard from './posts/Dashboard';

function App() {

  return (
    <BrowserRouter>
      <div className="App">
        <Navbarpage />
        <Routes>
          <Route path="posts" element={<Posts />}>
            <Route path="dashboard" element={<Dashboard />} />
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

The app works perfectly on localhost, but it worked on Heroku only if the route for Dashboard component was removed. I do not know how to make nested routes for React deployment on Heroku

Your suggestion and explanation for the problem would really be appreciated.

Thank you.