Javascript 如何让Select在React.js材质界面中选择后显示正确的标签？ 目标

我希望我的选择菜单看起来像下图（选择后）。请注意，标签会打断轮廓

现在的 我所拥有的是这个。请注意，轮廓如何不会中断并干扰标签的读取

这是密码

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>

const typeConfig=[
{值：'question'，标签：'question'，图标：'contact_support'，}，
{值：'comment'，标签：'comment'，图标：'comment'，}，
{值：'建议'，标签：'建议'，图标：'反馈'，}，
]
const getTypeSelect=（）=>
{typeLabel}
{
typeConfig.map（项=>
{item.icon}
{item.label}
)}

注意：我使用的是MaterialUIV3

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