Wordpress React Router routing not working

1. i build a page "user dashboard" and added shortcode [aft_wp_user_dashboard]

below code is inside plugins main file

    function aft_wp_user_dashboard() { 
        return "<div id='aft_wp_user_dashboard'>User Dashboard</div>"; 
    }

    add_shortcode('aft_wp_user_dashboard', 'aft_wp_user_dashboard');

2. opening http://localhost/user-dashboard, i get this on inspect

   <div id='aft_wp_user_dashboard'></div>
   

3. i render react project for id='aft_wp_user_dashboard' and react project renders here

    function Index() {
    return (
        <BrowserRouter basename="/user-dashboard">
            <Suspense fallback={<div>Loading...</div>}>
                <Routes>
                    <Route exact path="/" element={<UserDashboard />} />
                    <Route exact path="/product" element={<Product />} />
                </Routes>
            </Suspense>
        </BrowserRouter>
    )
   

   }

    document.addEventListener('DOMContentLoaded', () => {
    var root_id = "aft_wp_user_dashboard"
    if ('undefined' !== typeof document.getElementById(root_id) && null !== 
         document.getElementById(root_id)) {
         ReactDOM.render(<Index />, document.getElementById(root_id));
    }
   

   } );

4. Main and Product Link(react-router-dom) works fine and component render

    function UserDashboard() {
    return (
        <div>
            <Link to="/">Main</Link>
            <Link to="/product">Product</Link>
        </div>
    )
    }
   

5. problem is, when i refresh page http://localhost/user-dashboard/product, 404 page is given.

Have anyone faced this issue.

Note: I cannot use this solution React routing in wordpress and have changed wp permalink settings to post name.