ReactJS राज्य परिवर्तन असंगत है

जब मेरे पास "ड्राबटन" नामक एक बटन वर्ग होता है, जिसमें यह प्रस्तुत होता है

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

सेटस्टेट चलने से पहले, ड्रॉमोड सेटस्टेट चलने के बाद झूठा है, ड्रॉमोड अभी भी झूठा है।

लेकिन बटन को अभी भी लाल रंग का बैकग्राउंड मिलता है।

बटन पर दूसरा क्लिक करें:

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

लेकिन बटन फिर से नीला है राज्य में ड्रामोड को तिरस्कृत करने के लिए सत्य पर सेट है।

यह विसंगति क्यों हो रही है?