I am not able to use the router in react js -- 2

have been trying to use a router on react project but getting an error :

A Route is only ever to be used as the child of Routes element, never rendered directly. Please wrap your Route in a Routes.

The Code Is Shown Below
import About from "./container/About";
import Profile from "./container/Profile";
import { useState } from "react";
import {BrowserRouter as Routes,Route} from 'react-router-dom'
function App(){
const [state, setState] = useState('')
return(
<div className="App">
<button onClick={()=>setState('about')}>About</button>
<button onClick={()=>setState('profile')}>Profile</button>
<Routes>
<Route component={About} path='/about'></Route>
</Routes>
</div>
)
}
export default App;
I wish anyone helps me. This is an easy job to do at most 2 hours for expert.