state update lags in reactjs

Question

I may have missed something in my concept, I am updating my component value onClick of button and passing updated value to parent component. but my parent component running behind then child component. can any one please let me know what I am missing?

here is my parent component

onClick = (key) =>{
    console.log("key",key)
}
 <Volume onClick={this.onClick.bind(this)} volume={data}/>

Here is my volumeComponent

constructor(props){
       super(props);
       this.state ={
           volume: this.props.volume
       }
   }
    updateValue(type){
        console.log(type)
        this.setState({
            volume:type == "Inc"? this.state.volume+0.5:this.state.volume-0.5
        })

        this.props.onClick(this.state.volume);
    }
    render(){
        return(
            <div>
             <button type="button" onClick = {this.updateValue.bind(this,"Inc")}>
                                    <span className="glyphicon glyphicon-arrow-up"/>
                                    </button>
                                    <span className="value-growth"> 
                 {(Math.round(this.state.volume*10)/10).toFixed(1)}
              </span>
                                         <button disabled={this.state.volume<=0} type="button"

                                     onClick = {this.updateValue.bind(this,"Dec") } >
                                    <span className="glyphicon glyphicon-arrow-down"/>
                                    </button>
                                    </div>
        )
    }
}

now when I see in logs i.e my UI is showing value 1.1 but my logs showing value 0.6. same thing happens if I click down button. logs shows 1.1 value while UI 0.6 please help me put here