I am trying to build a chrome extension using reactjs and I realized that route is not working as expected,

What i am trying to do is the following:

• adding a button having a click event
• onclick the button should open the login page inside a pop up window using window.open
• use Route do defined which component should be opened inside the popup window

this is my code

 /* eslint-disable react/jsx-no-undef */
/* eslint-disable no-undef */
/*global chrome*/
import React from "react";
import { Router, Route, Routes, Link } from 'react-router-dom';
import { createBrowserHistory } from "history";
import login from "./login";
 class App extends React.Component {
     popupwindow = (url, title, w=500, h=500) => {
       var left = screen.width / 2 - w / 2;
    var top = screen.height * 0.1;
    return window.open(
        url,
        title,
        "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=" +
        w +
        ", height=" +
        h +
        ", top=" +
        top +
        ", left=" +
        left
    );
}
render() {
    const history = createBrowserHistory();
    return (
        <div>
            <button onClick={()=>this.popupwindow(chrome.runtime.getURL("/login"),"login")}>Twitter</button>
            <Router  location={history.location} navigator={history}>
                <div>                       
                    <Routes>
                        <Route path="/" exact element={<login />} />
                        <Route path="/login" exact element={<login />} />
                    </Routes>
                </div>
            </Router>
        </div>
    );
  }
};
export default App;

screenshot

my manifest already contains this section

  "web_accessible_resources": [{
   "resources": ["*.png"],
   "matches": ["<all_urls>"]
 },
 {
   "resources": ["*.html"],
   "matches": ["<all_urls>"]
 },
 {
   "resources": ["*.js"],
   "matches": ["<all_urls>"]
}], 

Does anyone know how to solve this? thank you