1.whenever i click on radio button it call the handleOptionChange callback but not reflect the change in html.
2.but when i click twice on radio button it reflect the change

My question is why i need to click twice on radio buttons? Is am i doing anything wrong?

class CompleteProfile extends Component{



    constructor(props){

        super(props);

        this.state = {

            teacher_role:'subject'

        };

        this.handleOptionChange = this.handleOptionChange.bind(this);

    }



    handleOptionChange(event){

        event.preventDefault();

        let { name, value } = event.target;

        this.setState( { [name]:value } );

    }



    render(){

        let { teacher_role } = this.state;

        console.log('teacher:',teacher_role);

        return(

            <Wrapper className=complete-profile>

                <CustomContainer>

                    <Title>complete profile</Title>

                    <ProfileCard>

                        <Form noValidate>



                            <FormGroup>

                                <label>I want to enroll as:</label>



                                <label htmlFor=test>

                                    <input id=test type=radio name=teacher_role value=subject checked={ teacher_role === 'subject' } onChange={ this.handleOptionChange } />

                                    subject teacher

                                </label>



                                <label htmlFor=test1>

                                    <input id=test1 type=radio name=teacher_role value=chapter checked={ teacher_role === 'chapter' } onChange={ this.handleOptionChange } />

                                    class teacher

                                </label>



                                <label htmlFor=test2>

                                    <input id=test2 type=radio name=teacher_role value=both checked={ teacher_role === 'both' } onChange={ this.handleOptionChange } />

                                    both

                                </label>



                            </FormGroup>

                        </Form>

                    </ProfileCard>

                </CustomContainer>

            </Wrapper>

        )

    }



    componentWillUpdate(nextProps){



    }



    componentDidUpdate(prevProps){



    }



}