React Select установил неправильное значение

Я схожу с ума от этого. Я использую реагировать-выбрать для своего приложения, и, поскольку у меня огромная форма, я создал небольшой компонент для обертывания таких выделений:

const SelectField = (props) => {
  const { id } = props;
  return (
    <Select
      id = {id}
      value = {this.state[id]}
      onChange = {(value) => { this.onChangeValue({ target: { id, value } }); }}
      options = {options[id]}
      placeholder = "Please select..."
    />
  );
};

А я так использую:

<SelectField id = "gender" />

Метод onChangeValue обрабатывает setState всех входов:

onChangeValue(e) {
  const { id, value } = e.target;
  this.setState({ [id]: value });
}

Поскольку react-select по какой-то странной причине не возвращает event, я просто эмулировал его, передавая нужные мне данные.

Кажется, что эта версия кода работает так, как ожидалось, если я выберу что-то, я смогу правильно увидеть правильное значение во входных данных. К сожалению, в состоянии, когда это значение неверно, это должен быть string, но это полный вариант: { label: 'Gender', value: 'Male'}.

Итак, здесь я уже не понимаю, как react-select может отображать Male, если результатом значения является этот объект.

Если я заменю onChange следующим образом:

onChange = {(value) => { this.onChangeValue({ target: { id, value: value.value } }); }}

Для меня это будет иметь больше смысла, поскольку я напрямую передаю правильное значение значению, которое нужно установить в состоянии.

Вдруг это вообще не работает. Если я выберу опцию, на входе все равно будет отображаться заполнитель, но, да, состояние правильное.

Я попытался добавить несколько обходных решений, но ни один из них не работает должным образом.

Мне нужно отобразить выбранное значение для выбора, а также иметь состояние, для пола в моем примере, чтобы быть строкой со значением, а не всем объектом ...

Что я здесь делаю не так? Идеи? Ваше здоровье