如何解决Material-UI问题的标签重叠？

Question

我是React的新学生... 我认为代码是正确的，但是我将此标签与select的轮廓重叠： Image of Issue

class NativeSelects extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      grupo: '',
      name: 'hai',
      labelWidth: 0,
    };
  }

  componentDidMount() {
    this.setState({
      labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth,
    });
  }

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.root}>

        <FormControl variant="outlined" className={classes.formControl}>
          <InputLabel
            ref={ref => {
              this.InputLabelRef = ref;
            }}
            htmlFor="outlined-age-simple"
          >Selecciona un grupo</InputLabel>
          <Select
            value={this.props.grupo}
            onChange={(e)=>this.props.handleChange(e.target.value)}
            input={
              <OutlinedInput
                name="grupo"
                labelWidth={this.labelWidth}
                id="outlined-age-simple"
              />
            }
          >
            <MenuItem value="" />
            <MenuItem value={1} >Fundamentos de Programacion</MenuItem>
            <MenuItem value={2} >Programacion Aplicada</MenuItem>
            <MenuItem value={3} >Taller de Desarrollo de Aplicaciones</MenuItem>
          </Select>
        </FormControl>
      </form>
    );
  }
}

NativeSelects.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(NativeSelects);

我只想消失重叠部分。 感谢您所做的一切，我将想了解更多有关React的信息！