is there any way to create a select component like this? I have tried from MUI but the collapsible list is not taking the value.Mui select collapsible

  const getOperatorComponent = (value: string, dataType: DataType) => {
    let basicOperator: Operator[] | undefined = AuthoringState?.operatorList?.[dataType]?.['Basic Operators'];
    let advanceOperator: Operator[] | undefined = AuthoringState?.operatorList?.[dataType]?.['Advance Operators'];
    return (
      <div style={{ width: '6rem' }}>
        <Select value={operatorValue} onChange={e => handleOperatorChange(e.target.value as string)}>
          {basicOperator?.map(item => <MenuItem value={item.operatorSymbol}> {item.operatorSymbol} </MenuItem>)}
          <ListItem>
            Advance Operator
            <IconButton onClick={() => setAdvanceOperatorOpen(prev => !prev)}>
              <Dropdown />
            </IconButton>
          </ListItem>
          <Collapse in={advanceOperatorOpen}>
            {advanceOperator?.map(item => <MenuItem value={item.operatorSymbol}>{item.operatorSymbol} </MenuItem>)}
          </Collapse>
        </Select>
      </div>
    );
  };