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.