React-router Basename didn't work what I expected in React

Question

I tried to write a React-router code with Basename. I made a Router.tsx file for managing Routes separately.

• What I expected : If I tried to access http://172.30.1.3:3000/commento or http://172.30.1.3:3000/commento/main, the screen should show the main page. Or, if I type http://172.30.1.3:3000/commento/detail, it should show a detail page. However, both the main and detail page empty(white screen).

I would really appreciate your help!

This is my Router.tsx code

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Nav from './components/Nav/Nav';
import { Main } from './main/Main';
import Detail from './detail/Detail';
import Footer from './components/Footer/Footer';

function Router() {
  return (
    <BrowserRouter basename="/commento">
      <Nav />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/main" element={<Main />} />
        <Route path="/detail" element={<Detail />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}
export default Router;

This is my index.tsx file

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import Routes from './Router';

ReactDOM.render(
  <React.StrictMode>
    <Routes />
  </React.StrictMode>,
  document.getElementById('root')
);