I am working on react application using vite and I am using latest version of react-router-dom v 6.23.0.
My react application is build on the subdirectory (./new-mobile/dist) of main directory.

Here is my main.tsx file

import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import store from '../redux/store.js'
import { Provider } from 'react-redux'
import {RouterProvider, createBrowserRouter} from 'react-router-dom';
import App3 from './App3'
import TestFile from './TestFile'

const basename = '/new-mobile/dist';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: 'testfile',
        element: <TestFile />
      }
    ]
  },
  {
    path: 'app3',
    element: <App3 />
  }
],
{
  basename: basename
});

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Provider store={store}>
    <RouterProvider router={router} />
  </Provider>
);

And here is the vite.config.ts file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import Checker from 'vite-plugin-checker';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    Checker({ typescript: true }),
  ],
  base: './new-mobile/dist'
})

The main problem is when i am going on home page https://my-domain/new-mobile/dist
it it working correctly, but when I go to its nested page (https://my-domain/new-mobile/dist/testfile) or child/sub-page like (https://my-domain/new-mobile/dist/app3) it breaks outs.

Also, this router is working fine on my local setup but breaks on test environment.

Things I tried:
I tried adding basename but is is also not working.
I tried jsx version of router, but still not working.