Отобразить выбранный материал, не отображающий значение после выбранного

Question

Я хочу закончить языковую программу, над которой я работаю. К сожалению, у меня постоянно возникают проблемы с компонентами реактивного материала. Я просто не могу заставить их работать вообще. В приведенном ниже примере выбранное значение не отображается в пользовательском интерфейсе.

JSX

<FormControl>
  <InputLabel htmlFor="nativeLanguageSelect">Select Language You Already Know</InputLabel>
  <Select
    onChange={ this.nativeLanguageChange }
    inputProps={{
      name: 'nativeLanguage',
      id: 'nativeLanguageSelect'
    }}
    value={ this.state.nativeLanguageDescription }
  >
    { Object.entries(languagesKey()).map(([key, value], index) => {
        if (key != this.state.nativeLanguage && key != 'bg') {
          const countryCode = key == 'ja' ? 'jp' : key,
                img = require(`../../assets/flags/flag-${countryCode.toUpperCase()}.png`),
                bgImgSrc = `url(${img})`;

          return (
            <MenuItem className="listItemFlag" key={ index } value={ key } style={{ backgroundImage: bgImgSrc }}>{ value }</MenuItem>
          )
        }
      })
    }
  </Select>
</FormControl>

Обработчик

nativeLanguageChange = (e) => {
  this.setState({
    nativeLanguage: e.target.value,
    nativeLanguageDescription: languagesKey()[e.target.value]
  })
}

Состояние

this.state = {
  description:               null,
  language:                  '',
  langaugeDescription:       '',
  listName:                  null,
  listIdToDelete:            null,
  nativeLanguage:            '',
  nativeLanguageDescription: '',
  openModal:                 false,
  words:                     null
}