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