React router returning the same element

Question

I am using react-router to display some pages

function App() {
  return (
    <Router>
     <Routes>
     <Route exact path="/" element={<HomePage />} />
     <Route  path ="about" component={<AboutPage />}  />
     </Routes>
    </Router>
  );
}

But the second path is either display a blanck page in abouve piece of code or display the same homepage if i use like below

<Routes>
     <Route exact path="/" element={<HomePage />} >
     <Route path ="about" component={<AboutPage />}  />
     </Route>
     </Routes>

</Router>

Which is the correct method to use to get the different pages?