我已经建立了一个侧边栏3级下拉与使用材料用户界面“列表”，我面临的问题与第三级下拉所有的孩子一起打开，当我点击任何第二级下拉。我分享的第二和第三级代码样本，我想管理的下拉onClick事件工作分别在第二个下拉列表。
我想为个人onClick第二个层次的下拉解决方案。其中第三层打开相关onClick事件。

{
      id: 'finance-management',
      icon: <img src="/images/finance-mgt.svg" />,
      name: 'Finance Management',
      url: 'finance',
      dropDown: [
        { 
        id: "profit",  
        sublist: "Profit & Loss",
          superSubList: [
            { superlist: "Payments"},
            { superlist: "Receivables"},
            { superlist: "Cashflow"},
            { superlist: "Profit & Loss Statement"},
          ]
      },
      { 
        id: "suppliers", 
        sublist: "Suppliers",
          superSubList: [
            { superlist: "Overview"},
            { superlist: "Create New"}
          ]
        }
      ]
     },
----------------------------------------------------

 const [sublistcl, setSubListcl] = useState();
   
  const handleSubClick = () => {
    setSubListcl(!sublistcl)
  };
----------------------------------------------------

{menuItem?.dropDown?.map((menuSubItem) => (
                    <div className="sub-drop-down">
                      <Collapse in={open} >
                      <List component="div" disablePadding>
                        <ListItemButton sx={{ pl: 4 }}
                        //  onClick={isExpandable && handleSubClick}
                         onClick={handleSubClick}
                         key={menuSubItem.id}
                        >
                          <ListItemText primary={menuSubItem.sublist} />
                          {sublistcl ? <ExpandLess /> : <ExpandMore />}
                          {/* {sublistcl  && !sublistcl && <ExpandMore />}
                          {sublistcl  && sublistcl && <ExpandLess />} */}
                        </ListItemButton>
                        {/* Super Sub List Item */}
                        
                           {menuSubItem?.superSubList?.map((itemThird) =>(
                             
                            <div className="list-item-subchild">
                            
                             <Collapse in={sublistcl} >
                                <List component="div" disablePadding>
                                <ListItemButton sx={{ pl: 5 }}>
                                  <ListItemText primary={itemThird.superlist} />
                                </ListItemButton>
                                </List>
                                </Collapse>
                               
                            </div>  
                           ))}
                      </List>
                    </Collapse>
                    </div> 
                  ))}

-----------------------------------------------