如何在react.js物料界面中选择后,让select显示正确的标签?

目标

我希望我的选择菜单看起来像下图(选择后)。请注意,标签分解了轮廓。 Documentation.

当前

相反,我得到的是这个。请注意,轮廓不会中断并干扰标签的读取。

这是密码。

const typeConfig = [
  { value : 'question'   , label : 'Question'        , icon : 'contact_support' , } ,
  { value : 'comment'    , label : 'Comment'         , icon : 'comment'         , } ,
  { value : 'suggestion' , label : 'Suggestion'      , icon : 'feedback'        , } ,
]

const getTypeSelect = () =>
  <FormControl variant="outlined" fullWidth>
    <InputLabel ref={inputLabel} htmlFor="select">{typeLabel}</InputLabel>
    <Select
      value={type} onChange={handleChangeType}
      input={<OutlinedInput labelWidth={labelWidth} name="select" id="select" />}
    >
      {
        typeConfig.map( item =>
          <MenuItem className="align-middle" key={item.value} value={item.value}>
            <ListItemIcon className="inline align-middle">
              <Icon>{item.icon}</Icon>
            </ListItemIcon>
            <Typography
              className="inline align-middle" variant="inherit"      
              display="inline" noWrap
            >
              {item.label}
            </Typography>
          </MenuItem>
      )}
    </Select>
  </FormControl>

注意:我使用的是材料ui v3

注意:当焦点移动到另一个表单元素时,我也得到了这种奇怪的覆盖效果。没有必要在你的回答中解决下面的问题,因为如果这个问题没有解决,我会问一个单独的问题。我提到它只是为了提供更完整的信息。