Вопрос об использовании Dropdown React в semantic-ui-реагировать

Question

Я хочу построить список раскрывающихся списков, используя компонент Dropdown из semantic-ui-реаги *
Я следовал приведенному здесь коду: https://codesandbox.io/s/50xzvqrwxn?module=/example.js,, что выглядит довольно неплохо.
Вот следующий результат, который я получаю, когда помещаю его в свой код:

А вот моя функция рендеринга:

render() {
return (
  <div className="NewNote">
    <form onSubmit={this.handleSubmit}>
      <FormGroup controlId="content">
        <FormControl
          placeholder="Enter your comment on file here..."
          onChange={this.handleChange}
          value={this.state.content}
          componentClass="textarea"
        />
      </FormGroup>
      <FormGroup controlId="file">
        <ControlLabel>Attachment</ControlLabel>
        <FormControl onChange={this.handleFileChange} type="file" />
      </FormGroup>

      <FormGroup>
        <ControlLabel>Select file category</ControlLabel>
      </FormGroup>

      <Dropdown text='File'>
        <Dropdown.Menu>
          <Dropdown.Item text='New' />
          <Dropdown.Item text='Open...' description='ctrl + o' />
          <Dropdown.Item text='Save as...' description='ctrl + s' />
          <Dropdown.Item text='Rename' description='ctrl + r' />
          <Dropdown.Item text='Make a copy' />
          <Dropdown.Item icon='folder' text='Move to folder' />
          <Dropdown.Item icon='trash' text='Move to trash' />
          <Dropdown.Divider />
          <Dropdown.Item text='Download As...' />
          <Dropdown.Item text='Publish To Web' />
          <Dropdown.Item text='E-mail Collaborators' />
        </Dropdown.Menu>
      </Dropdown>

      <LoaderButton
        block
        bsStyle="primary"
        bsSize="large"
        disabled={!this.validateForm()}
        type="submit"
        isLoading={this.state.isLoading}
        text="Create"
        loadingText="Creating…"
      />
    </form>
  </div>
);
}

У кого-то естьидея об этой проблеме?