MUI Treeview/TreeItem OnClick Not working

So I have a MUI TreeView populated with TreeItems. I need to perform certain actions on click of the treeitems. However, the onclicks are not getting recognized. Could someone please help me with this?

This is my what is supposed to happen onClick:

const handleClick = (item, subItem = "") => {
    console.log("here: ", item, subItem);
    setImages([]);
    setTitle(subItem !== "" ? item + " " + subItem : item);
    setBreed(item);
    setSubBreed(subItem);
  };

This is my TreeView component:

<TreeView
            aria-label="rich object"
            defaultCollapseIcon={<ExpandMoreIcon />}
            // defaultExpanded={<PetsIcon />}
            defaultEndIcon={<PetsIcon />}
            defaultExpandIcon={<ChevronRightIcon />}
            sx={{ flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
          >
            {Object.keys(data).map((item) =>
              data[item].length === 0 ? (
                <TreeItem
                  nodeId={item}
                  label={item}
                  onClick={console.log("dddddd")}
                  // onClick={handleClick(item)}
                />
              ) : (
                <TreeItem nodeId={item} label={item}>
                  {data[item].map((subitem) => (
                    <TreeItem
                      nodeId={subitem}
                      label={subitem}
                      onClick={console.log("ffffff")}
                      // onClick={handleClick(item, subitem)}
                    />
                  ))}
                </TreeItem>

Data is a dictionary of key(string) and value(array of strings).