How to navigate on a different component using material UI

here is the code of my drawer list

  <List>
          {['POS', 'Stock', 'Send email', 'Drafts'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
    </List>

I would like to navigate on the stock page

App.js

  <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>

I want that if I will click this listItem element so that component will open here is my GUI