Изменение состояния ReactJS несовместимо

Когда у меня есть класс кнопки "DrawButton", у которого есть этот рендер

render() {
    return(
        <Button
            onClick={this.props.toggleDraw.bind(this)}
            style={{
                backgroundColor: this.props.drawMode ? 'red' : 'blue'
            }}
        >
            Draw
        </Button>
    );
}

И в родительском App.js состояние определяется

state = {
        drawMode: false
}

И есть функция-обработчик

toggleDraw = (e) => {
    console.log('App.js drawMode:' + this.state.drawMode);
    this.setState({
        drawMode: !this.state.drawMode
    });
    console.log('App.js drawMode:' + this.state.drawMode);
}

И наконец кнопка:

render() {
  return (
    <div className="App">
        <DrawButton 
            toggleDraw={this.toggleDraw} 
            drawMode={this.state.drawMode}
        />
    </div>
  );
}

Состояние не обновляется должным образом. Он выводит следующее:

Сначала нажмите кнопку

App.js drawMode:false
App.js:27
App.js drawMode:false
App.js:31

Перед запуском setState drawMode имеет значение false, после запуска setState, drawMode все еще остается false.

Но кнопка по-прежнему имеет красный фон.

Второй щелчок по кнопке:

App.js drawMode:true
App.js:22
App.js drawMode:true
App.js:26

Но кнопка снова синего цвета despise drawMode в состоянии установлено значение true.

Почему происходит это несоответствие?