how to navigate on pages using material ui in reactjs

I am making a drawer for my dashboard using material-Ui, I have faced an issue navigating on my pages

first, I wanna share my app. js and here I have product route

<Provider store={store}>
<BrowserRouter>
    < Routes>
      <Route exact path='/' element={<Login/>} />
      <Route exact path='/dashboard' element={<Dashboard/>} />
      <Route exact path='/product' element={<Product/>}/>
    </Routes>
  </BrowserRouter>
</Provider>

here is my dashboard code:

In this code, I am an object who has an onClick function for navigation on pages

  const listItem = [
    {
      text:'Dashboard',
      onclick:()=>navigate("/dashboard")
    }, 
    {
      text:'Prdocut',
      onclick:()=>navigate("/product")
    } 
  ]

here is my list of who is rendering the items

<List>
  {listItem.map((item, index) => {
    const { text,onClick} = item;
      return (
         <ListItem button key={text} onClick={onClick}>
            <ListItemText primary={text} />
         </ListItem>
        )})}
</List>

but it’s not navigation my my product page