React router dom doesn't work properly with realtive path configuration

Question

I'm trying to have a react application in a relative path of a server, I would like to use /manager path for this purpose, Then finally I will have https://mywebsite.com/manager/../..

I have configured the Nginx as below:

server { 
    server_name mywebsite.com;   
     
    location /manager/ {
        auth_basic "Restricted Access Only"; 
        auth_basic_user_file /etc/nginx/.myhtpasswd; 
        
        alias /root/mywebsite.com/manager-ui/build/;
        try_files $uri $uri/ /index.html;
    } 
} 

React index.js

<BrowserRouter basename="/manager"> 
   <App />
</BrowserRouter>

App.js

function App() { 
  return (
    <div className="container">  
        <Routes>
          <Route path="/games/:gameId" element={ <GameDetailsPage /> }   />  
          <Route path="/games" element={ <GamesPage /> }   />  
          <Route path="/" element={ <GamesPage /> }   />  
        </Routes> 
    </div>
  );
}

package.json

{ 
  ...
  "homepage": ".", 
  ...
  "react-router-dom": "^6.6.2",
  "react": "^18.2.0",
  ...
}

It works fine when I'm on the root page (https://mywebsite.com/manager/) and I don't refresh the page, But If I navigate to a route (https://mywebsite.com/manager/r1/r2/..) and refresh the page then I will see "Cannot GET /index.html", Seems the Nginx cannot route to the path correctly.

May someone help me, please?