React bootstrap - Select не обновляет выбранные параметры должным образом

Question

Я использую React- Bootstrap, но у меня проблема с выбранными параметрами. Они не обновляются должным образом. В моем примере моей первой страной была «Албания». Но когда я пытаюсь выбрать другую страну и нажимаю «Отправить», все работает, как ожидалось, но опция «Албания» не меняется на другую страну, которую я выбрал.

Это мой текущий код:

class DynamicSelect extends Component {
   handleChange = (event) => {
      let selectedValue = event.target.value;
      this.props.onChange(selectedValue);
   }

   render() {
      let arrayOfData = this.props.arrayOfData;
      let options = arrayOfData.map((data) =>
         <option key={uuidv4()} value={data.name}>
            {data.name}
         </option>
      );

      return (
         <Form.Group controlId="formBasicRangeCustom">
            <Form.Control onChange={this.handleChange} as="select" size="sm">
               {options}
            </Form.Control>
         </Form.Group>
      )
   }
}

export default DynamicSelect;

arrayOfData выглядит так:

export const arrayOfData = [
   {
      name: 'Albania',
      id: 'AL'
   },
   {
      name: 'Austria',
      id: 'AT'
   },
]

ps Под моим Form.Control, где у меня {options}, я попытался жестко закодировать <options>, и он работал, как ожидалось. Но идея состоит не в том, чтобы жестко их кодировать