List Item collapse open and closes when clicking on icon only not label material-ui

I'm using material ui in my project. Everything works fine except that I want the list to only open/close when the icon is clicked not the whole label.

const handleClick = () => {
    setOpen(!open)
  }

  return (
    <>
      <List>
        <ListItem  onClick={handleClick} >
          {open ? (
            <FaAngleDown className="expand-icons" />
          ) : (
            <FaAngleRight className="expand-icons" />
          )}
          <ListItemText id="expand-control-options" primary="Control" />
        </ListItem>

I tried using TreeView and TreeItem but it did not work. ANy suggestions much appreciate it!

from Recent Questions - Stack Overflow https://ift.tt/3iPBHDl
https://ift.tt/eA8V8J