Как получить response-bootstrap v1.0.0 для обновления выбранного значения Form.Control из содержащего компонента?

Question

Часть моего веб-приложения предоставляет компонент пользовательского интерфейса для установки переменной режима. Режим выбирается из списка возможных вариантов, и пользователь должен все время видеть текущий выбранный режим. Другие части приложения также могут изменять режим, и это должно изменить режим, который видит пользователь.

Я использую create-реагировать-приложение и реагировать-загрузчик 1.0.0-бета.6 <Form.Control as="select"> компонент для реализации этого. Компонент работает правильно, когда пользователь выбирает режим из списка параметров в компоненте, но когда изменение происходит где-то еще в коде, изменение не распространяется на компонент Form.Control.

Я сделал минимальный пример кода, который показывает проблему. Его можно клонировать с git@github.com:tyhmakyselee/formtest.git. Ниже приведен файл App.js, который содержит весь код js. App.js создает компонент <Form.Control>, который имеет три возможных варианта ['a', 'b', 'c'] с использованием функции SelectMode, и компонент <Button> с обработчиком, который просто циклически меняет режим на следующий в списке. Обработчик кнопки вызывается, состояние приложения изменяется, но это не отображается в элементе <Form.Control>.

import React from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

class App extends React.Component {
    modes = ['a', 'b', 'c'];

    constructor(props) {
        super(props);
        this.state = {
            currentMode: this.modes[2]
        };
    };

    setMode = (newMode) => {
        console.log('App.setMode', this.state.currentMode, newMode);
        this.setState({currentMode: newMode});
    };

    nextMode = (event) => {
        const index = this.modes.indexOf(this.state.currentMode);
        const newMode = this.modes[(index+1) % this.modes.length];
        console.log('App.nextMode', this.state.currentMode, newMode);
        this.setState({currentMode: newMode});
    };

    render() {
        return (
            <div>
              <SelectMode
                modes={this.modes}
                currentMode={this.state.currentMode}
                handleChange={this.setMode}
              />
              <Button
                onClick={this.nextMode}>
                Next mode
              </Button>
            </div>
        );
    };
}

const SelectMode = (props) => {
    console.log('SelectMode', props);
    return (
        <Form>
          <Form.Control
            as="select"
            onChange={event => props.handleChange(event.target.value)}
            value={props.currentMode}>
            {props.modes.map(m => <option key={m} value={m}>{m}</option>)}
          </Form.Control>
        </Form>);
};

export default App;

Как я могу получить изменение режима обработчиком Button для распространения на компонент Form.Control?