React Course Routing

Question

Hello all!
I'm very troubled by the routing part of the react course.
It seems to me as though I did everything just as displayed in the course. But for some reason, the app display on my browser doesn't show anything. Completely white and blank, except the icon on the tab.
Adding here the project
Sorry in advance for the complexity...
p.s. I tried to open in chrome and explorer, both fail.
I'm working with VS Code.
React last version.
Thanks a lot

index.js:
imports...
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

App.js:
import React, { Component } from 'react';
import './App.css';
import Header from './Header';
import Main from './Main';

class App extends Component {
render() {
return (
<div>
<Header />
<Main />
</div>
);
}
}
export default App;

Header.js:
import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
return (
<div>
<nav>
<li><Link to='/'>Home</Link></li>
<li><Link to='/products'>Products</Link></li>
<li><Link to='/orders'>Orders</Link></li>
</nav>
</div>
);
}
export default Header;

Main.js:
import React from "react";
import { Routes, Route } from 'react-router-dom';
import Home from './Pages/Home';
import Products from './Pages/Products';
import Orders from './Pages/Orders';

const Main = () => {
return (
<main>
<Routes>
<Route exact path='/' element={<Home/>} render={() => <Home/>}/>
<Route path='/products' element={<Products/>} render={() => <Products/>} />
<Route path='/orders' element={<Orders/>} render={() => <Orders/>} />
</Routes>
</main>
);}
export default Main;

If there's any need I'll add Home, Products and Orders js files.
Thanks again...