how to navigate on pages using material ui in reactjs

Question

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

Answer 1

the error is in onclick but at map function you destructing it as onClick but it is onclick

it should like

import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();
  const listItem = [
    {
      text: "Dashboard",
      onc: () => navigate("/")
    },
    {
      text: "Prdocut",
      onc: () => navigate("/home")
    }
  ];
  return (
    <>
      <ul>
        {listItem.map((item) => {
          const { text, onc } = item;
          return <li onClick={onc}>{text}</li>;
        })}
      </ul>
    </>
  );
};
export default Home;