Soy nuevo en React, mi objetivo es mostrar color cuando hago clic en uno de los elementos del menú en la barra lateral. ¿Alguien puede ayudarme a cambiar el color al hacer clic en el elemento del menú?

¿Cómo cambiar el color de la barra lateral del elemento del menú cuando hacemos clic en él con Material-UI en React? Hice referencia a la publicación pero no resolvió mi problema.

https://i.stack.imgur.com/gInE5.png

Aquí está el código:

 import React from "react"; import { Collapse, List, ListItem } from "@material-ui/core"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import ExpandLessIcon from "@material-ui/icons/ExpandLess"; import { useNavigate } from "react-router-dom"; const SidebarItem = ({ item }) => { const [collapsed, setCollapsed] = React.useState(true); const { title, enable, path, items } = item; let navigate = useNavigate(); const toggleCollapse = () => { setCollapsed(prevValue => !prevValue); } const onClick = () => { if (Array.isArray(items)) { console.log(items); toggleCollapse(); } else if (enable === true) { console.log(path); if (item[0]) { return navigate(''); } else { return navigate("/setup/"+path); } } } let expandIcon; if (Array.isArray(items) && items.length) { expandIcon = !collapsed ? <ExpandLessIcon /> : <ExpandMoreIcon />; } return ( <> <ListItem onClick={onClick} button dense> <div>{title}</div> {expandIcon} </ListItem> <Collapse in={!collapsed} timeout="auto" unmountOnExit> {Array.isArray(items) ? ( <List> {items && items.map((subItem, index) => ( <SidebarItem key={`${subItem}${index}`} item={subItem}/> ))} </List> ) : null} </Collapse> </> ); } const Sidebar = ({ items }) => { return ( <> <List> {items && items.map((sidebarItem, index) => ( <SidebarItem key={`${sidebarItem}${index}`} item={sidebarItem}/> ))} </List> </> ); } export default Sidebar;