semantic-ui-реагирует: делает большой набор данных в Form.Select замедляет форму?

Question

У меня есть форма ниже (внутри модального), созданная с использованием semantic-ui-реакции.

  <Modal open={editBasicModal} size="small">
    <Modal.Header>Your basic details</Modal.Header>
    <Modal.Content scrolling>
      <Form loading={isSubmitting}>
        <Form.Group inline widths="equal">
          <Form.Input
            required
            label="First Name"
            fluid
            type="text"
            name="firstName"
            value={values.firstName}
            onChange={handleChange}
            error={errors.firstName !== undefined}
          />
          <Form.Input
            required
            label="Last Name"
            fluid
            type="text"
            name="lastName"
            value={values.lastName}
            onChange={handleChange}
            error={errors.lastName !== undefined}
          />
        </Form.Group>
        <Form.TextArea
          label="Bio"
          type="text"
          name="bio"
          value={values.bio}
          onChange={handleChange}
          rows={3}
          error={errors.bio !== undefined}
        />
        <Form.Select
            label="Country"
            name="location.country"
            placeholder="Country"
            value={values.location.country}
            onChange={(e, { value }) => {
              setFieldValue("location.country", value);
            }}
            options={this.state.allCountries}
          />
      </Form>
    </Modal.Content>
    <Modal.Actions open={true}>
      <Button type="submit" onClick={handleSubmit} >
        Update
      </Button>
    </Modal.Actions>
  </Modal>

Приведенный выше код взят из компонента, который использует Formik + yup.
this.state.allCountries являетсямассив из 200+ записей.Теперь это замедляет мою форму, печатая внутри textarea и input очень медленно.

Согласно моим выводам, большой набор данных в Form.Select вызывает проблему, потому что, если я заменю options={this.state.allCountries} на options={[ { key: 1, value: "india", text: "india"} ]}, все начинает работать нормально.Или, если я удаляю Form.Select, то также форма работает нормально.

Несколько вопросов?

1. Это известная проблема?
2. Каковы возможные решения?

Answer 1

Я понял, что это проблема с Form.Select. Я изменил его с select, и тогда все работало гладко. Вот обновленный код для выбора:

<Form.Field > 
  <label htmlFor="location.country">Country</label>
  <select 
    name="location.country" 
    id="location.country" 
    value={values.location.country } 
    onChange={event => {
    setFieldValue("location.country", event.target.value);
    }}
  >
    <option key={0} value={undefined}>
      -select-
    </option>
    {this.state.allCountries}
  </select>
</Form.Field>

Рендерит похожий (несколько) элемент select без проблем с медлительностью.

Надеюсь, это кому-нибудь поможет.