react,material-uiのselectにて、labelと要素が重なって表示される

以下のような形で、reactにてmaterial-uiを使用し、セレクトボックスを作成しています。

しかし、labelとセレクトボックス内の要素が重なって表示されてしまいます。

どのような観点で修正を実施すればよいかご教示いただければ幸いです。

  componentWillMount() {
    navigator.mediaDevices.enumerateDevices().then(devices => {
      const deviceList = devices.filter(
        device => device.kind === 'audioinput' && device.deviceId !== 'default'
      );
      const deviceId = deviceList[0].deviceId;
      this.setState({ deviceList, deviceId });
    });
  }
================================================================================

            <FormControl>
              <InputLabel htmlFor='audioinput'>
                {intl.get('selectAudioInputDevice')}
              </InputLabel>
              <Select
                style={{ minWidth: '250px' }}
                value={this.state.deviceId}
                onChange={this.handleOnChange}
                inputProps={{ id: 'audioinput' }}
              >
                {this.getMenuItems()}
              </Select>
            </FormControl>