React-Admin v4: how to set basename with keyword after /#/

Question

I'm trying the simplest React Admin v4 setup to have a path structure such as /#/{project}/resource..., for instance /#/project_1/user/, /#/project_2/user/ etc... (I want everything under /#/ so I can serve my app via static files).

Looking at this guide I have:

import * as React from "react";
import { Admin, Resource, CustomRoutes, ListGuesser } from "react-admin";
import { Route } from "react-router-dom";
import { BrowserRouter } from "react-router-dom";

let project = "project_1";

const Dashboard = () => {
  return <>Dashboard</>;
};

const Test = () => {
  return <>Test</>;
};

const App = () => {
  let basename = "/#/" + project;
  return (
    <BrowserRouter>
      <Admin dashboard={Dashboard} basename={basename}>
        <Resource name="user" list={ListGuesser} />
        <CustomRoutes>
          <Route path="/settings" element={<Test />} />
        </CustomRoutes>
      </Admin>
    </BrowserRouter>
  );
};

export default App;

What's working properly

• The menu link paths are as desired (eg /#/project_1/user/)

What's not working

• No matter which menu link I click, it's the dashboard being displayed (even if I try the custom route at /#/project_1/settings/ or /#/settings)

What do I need to restore resources/custom routes while preserving the path structure with the leading /#/{project}/?

PS: I am running RA v4:

  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "prop-types": "^15.8.1",
    "ra-data-json-server": "^3.19.11",
    "react": "^18.0.0",
    "react-admin": "4.0.0-rc.1",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.0"
  },