<Router basename="/main"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything. warning

[piszczu4]

I've got error when trying to run it like below:

import { createElectronRouter } from 'electron-router-dom'

export const { Router, registerRoute } = createElectronRouter({
  port: 5123,
  types: {
    /**
     * The ids of the windows of your application, think of these ids as the basenames of the routes
     * this new way will allow your editor's intelisense to help you know which ids are available to use
     * both in the main and renderer process
     */
    ids: ['main'],
  },
})

main.ts

app.on("ready", () => {
	const mainWindow = new BrowserWindow({
		webPreferences: {
			preload: getPreloadPath(),
		},
		frame: true,
	});

	registerRoute({
		id: 'main',
		browserWindow: mainWindow,
		htmlFile: path.join(__dirname, '../../index.html'),
	  })

	  
	});

main.tsx

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <AppRoutes />
  </React.StrictMode>
);

routes.tsx

import { Router } from "../lib/electron-router-dom";
import { Route } from "react-router-dom";
import App from "./App";
import { Games } from "./pages/games";
import { LoginPage } from "./pages/login";

export function AppRoutes() {
  return (
    <Router
      main={
        <>
          <Route path="/" element={<App />} />
          <Route path="/games" element={<Games />} />
          <Route path="/login" element={<LoginPage />} />
        </>
      }
    />
  );
}

What am I doing wrong?