undefined is not an object (evaluating 'reactRouter.Route')

So I am very new to this! I'm trying to display a react webcomponent inside of a Wordpress page, therefore I'm using the CDN links to import react, react-dom and react-router-dom (know this isn't the best option but this is where I am...)

In any case, when I try to import Route and Routes, in the javascript file I get this error

undefined is not an object (evaluating 'reactRouter.Routes')

Im not sure what I am doing wrong, in the documentation you do this

import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'

BrowserRouter and Link works fine, but not Routes or Route... What am I doing wrong?

js file:

const useEffect = React.useEffect
const useState = React.useState
const createRoot = ReactDOM.createRoot
const Router = ReactRouterDOM.BrowserRouter
const Link = ReactRouterDOM.Link
const Routes = ReactRouterDOM.Routes
const Route = ReactRouterDOM.Route
...

index.html

...
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-router-dom@6.4.1/dist/umd/react-router-dom.development.js" crossorigin></script>
...

If I were to use

const Routes = React.Routes

I get this instead:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of App.

JS file to reproduce:

const useEffect = React.useEffect
const useState = React.useState
const createRoot = ReactDOM.createRoot
const Router = ReactRouterDOM.BrowserRouter
const Link = ReactRouterDOM.Link
const Routes = ReactRouterDOM.Routes
const Route = ReactRouterDOM.Route

function App() {

return (
    <Router>
        <Routes>
            <Route path="/" element={<Loading/>}>

            </Route>
        </Routes>
    </Router>
)
}

function Loading() {
return(
    <div>
        <h2>Loading items, please wait</h2>
        <p>This should not take long, refresh if you are stuck here.</p>
    </div>
) 
}

const container = document.getElementById('test');
const root = createRoot(container);
root.render(<App />);