Unable to render my components inside the <Route> in App.js

Question

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Navs from './components/Navs';
import Home from './pages/Home';
import Starred from './pages/Starred';
function App() {
return (
<div>
<Navs />
<Routes>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/starred">
<Starred />
</Route>
<Route>
<div>Not Found</div>
</Route>
</Routes>
</div>
);
}
export default App;
As per the update, the <Switch> has been changed to <Routes> but the issue is, the data inside the <Route> is not being rendered on the webpage.
Can someone point out the cause/error regarding this?
A Sololearner suggested to Try this :
<Route exact path="/" element={<Home />} />
https://github.com/Roland-Foucher/atelier-cuir-fuchats-front/blob/main/src/components/App.js
But this didn't work either.

Answer 1

Somehow I ended up solving this problem by commenting out the 404, but I don't know the reason how it ended up working out.
My guess is that v6 allows self-closing <Route> and when I commented the <Route></Route> the code worked.
Do let me know the correct reasoning behind this. Thank You.
Following are the changes I made in App.js and index.js:
function App() {
return (
<div>
<Navs />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/starred" element={<Starred />} />
{/* <Route>
<div>Not Found</div>
</Route> */}
</Routes>
</div>
);
}
index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);

Answer 2

<Route path="*" element={<PageNotFound />} />
Try this

Answer 3

Malai Raja D it worked! Many thanks.