Open a different route of same ReactJS app in another BrowserWindow Electron

Question

I am developing a react+electron app where, it is required to open another BrowserWindow from main process using the same react, so I can share the same react states at both windows.

Issue: It opens index.html as default page and the 2nd window which opens, opens a new app and not the child one or gives childWindow page not found. I think it is the url creation.

Electron:

export function resolveHtmlPath(htmlFileName: string) {
  if (process.env.NODE_ENV === 'development') {
    const port = process.env.PORT || 1212;
    const url = new URL(`http://localhost:${port}`);
    url.pathname = htmlFileName;
    return url.href;
  }
  return `file://${path.resolve(__dirname, '../renderer/', htmlFileName)}`;
}

const mainWindow = new BrowserWindow({
      title: 'main window',
      show: false,
      width: 1920,
      height: 1080,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
      },
    });
mainWindow.loadURL(resolveHtmlPath('index.html'));

mainWindow.on('ready-to-show', () => {
    if (!mainWindow) {
      throw new Error('"mainWindow" is not defined');
    }
    if (process.env.START_MINIMIZED) {
      mainWindow.minimize();
    } else {
      mainWindow.show();
      log.info('Called to show');
      /*setTimeout(() => {
        openChildWindow();
      }, 10000);*/
    }
  });


const openChildWindow = () => {
    // child window
    const childWindow = new BrowserWindow({
      show: false,
      frame: true,
      width: 1920,
      height: 1080,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js')
      },
    });

    childWindow.loadURL(resolveHtmlPath('index.html/#/childWindow'));

    childWindow.on('ready-to-show', () => {
      if (!childWindow) {
        throw new Error('"childWindow" is not defined');
      }
      if (process.env.START_MINIMIZED) {
        childWindow.minimize();
      } else {
        childWindow.show();
      }
    });
  };

React app index.tsx

import App from './container/App/App';
import './scss/style.scss';

render(<App />, document.getElementById('root'));

App.tsx

import { Route, HashRouter as Router } from 'react-router-dom';
export default function App() {
return (
    <>
      <Router>
        <Route
          path={'/'}
          render={() => {
            return (
              <>
                <div>Main window</div>
              </>
            );
          }}
        ></Route>
        <Route exact path="/childWindow" 
            render={() => {
                return (
                    <>
                        <div>Child window</div>
                    </>
                );
            }}
        ></Route>
      </Router>
    </>
  );
}

Versions: electron - 18.0.0 react: 17.0.2 react-router-dom - 5.3.0 @types/react-dom - 17.0.10, @types/react-router - 5.1.17

Can't share a test example link due to electron constraints

thanks.