My Sidebar.jsx is "import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import Collapse from '@mui/material/Collapse';
import Box from '@mui/material/Box';
import { ExpandLess, ExpandMore } from '@mui/icons-material';

const drawerWidth = 200;
const navbarHeight = 64;

const Sidebar = () => {
  const [ProductsOpen, setProductsOpen] = useState(false);
  const [OrderOpen, setOrderOpen] = useState(false);

  const handleProductClick = () => {
    setProductsOpen(!ProductsOpen);
  };
  const handleOrderClick = () => {
    setOrderOpen(!OrderOpen);
  };
  return (
    <Box 
    component="nav"
    sx={{
      width: drawerWidth,
      backgroundColor: '#000000',
      color: '#FFFFFF',
      position: 'fixed',  // Ensures the sidebar stays fixed
      top: navbarHeight,  // Adjust the top based on the height of your Navbar
      left: 0,
      bottom: 0,  // Stretches to the bottom of the page
      height: `calc(100% - ${navbarHeight}px)`,  // Full height minus the Navbar’s height
    }}
  >
      <List sx={{ width: '100%' }}>
        <ListItem button component={Link} to="/home"           sx={{
            '&:hover': {
              backgroundColor: '#333333', // Darker background on hover
            },
          }}>
          <ListItemText primary="Home" />
        </ListItem>
        <ListItem button onClick={handleProductClick}           sx={{
            '&:hover': {
              backgroundColor: '#333333', // Darker background on hover
            },
          }}>
          <ListItemText primary="Product" />
          {ProductsOpen ? <ExpandLess /> : <ExpandMore />}
        </ListItem>
        <Collapse in={ProductsOpen} timeout="auto" unmountOnExit>
          <List component="div" disablePadding>
            <ListItem button sx={{ pl: 4 }} component={Link} to="/product/add">
              <ListItemText primary="New Product" />
            </ListItem>
            <ListItem button sx={{ pl: 4 }} component={Link} to="/product/list" >
              <ListItemText primary="Product List" />
            </ListItem>
            <ListItem button sx={{ pl: 4 }} component={Link} to="/product/category" >
              <ListItemText primary="Category List" />
            </ListItem>
          </List>
        </Collapse>
        <ListItem button onClick={handleOrderClick}  sx={{
            '&:hover': {
              backgroundColor: '#333333', // Darker background on hover
            },
          }}>
          <ListItemText primary="Order" />
          {ProductsOpen ? <ExpandLess /> : <ExpandMore />}
        </ListItem>
        <Collapse in={OrderOpen} timeout="auto" unmountOnExit>
          <List component="div" disablePadding>
            <ListItem button sx={{ pl: 4 }} component={Link} to="/order/list" >
              <ListItemText primary="Order list" />
            </ListItem>
            <ListItem button sx={{ pl: 4 }} component={Link} to="/order/add"  >
              <ListItemText primary="New Order" />
            </ListItem>
          </List>
        </Collapse>
        <ListItem button component={Link} to="/staff"  sx={{
            '&:hover': {
              backgroundColor: '#333333', // Darker background on hover
            },
          }}>
          <ListItemText primary="Staff" />
        </ListItem>
        <ListItem button component={Link} to="/profile"  sx={{
            '&:hover': {
              backgroundColor: '#333333', // Darker background on hover
            },
          }}>
          <ListItemText primary="Profile" />
        </ListItem>
        <ListItem button component={Link} to="/about"  sx={{
            '&:hover': {
              backgroundColor: '#333333', // Darker background on hover
            },
          }}>
          <ListItemText primary="About" />
        </ListItem>
        <ListItem button component={Link} to="/contact"  sx={{
            '&:hover': {
              backgroundColor: '#333333', // Darker background on hover
            },
          }}>
          <ListItemText primary="Contact" />
        </ListItem>
      </List>
    </Box>
  );
};

export default Sidebar;", I need to apply hover effect to sub menu, how to to that?