Nothing renders on my google extension when using routes in a react app, just empty

I have this Global file:

import {Route} from 'react-router-dom'import { Login } from '@/App';import { SignUp } from '@/Sign-up';const Global = () => {  return (<><Route path='/' element={<Login/>}></Route><Route path='/sign-up' element={<SignUp/>}></Route></>  )}export default Global

and I render it on:

import ReactDOM from "react-dom/client";import { BrowserRouter as Router, Routes } from "react-router-dom";import "./index.css";import Global from "./routes/Global";ReactDOM.createRoot(document.getElementById("root")!).render(<Router><Routes>{Global()}</Routes></Router>);

but nothing renders, this is what appears to me: enter image description here

I am expecting that there is a way to render routes when dealing with extensions