Problem with checkbox onchange on react JS doesn't work properly

See more:

Javascript

CSS

HTML5

ReactJS

hello everyone! Don't me judge too hard. I am pretty new on using React JS.

I wrote some code  using React JS, but the problem is that checkbox isn't working on Front-end side.
It doesnt have an issue on backend side i.e. everything is being changed on Database if user clicks on the button.

Please can you help me with understanding that. Thank you very much!

constructor(props){
            super(props);
            this.state = {
                user : props.user,
            };
    
            this.sexChange = this.sexChange.bind(this);
        }
    
    
        sexChange(event){
            Loader.startProgress();
            Http.postJson("/profile/update-data",{
                genderUser : event.target.value
            },(body,status,response) => {
                if(response.status === 202){
                    this.setState({ user : body });
                }
                Loader.stopProgress();
            },(response) => {
                Loader.stopProgress();
                Dialog.alert("Не удалось изменить");
            });
        }

<div className="user-sex">
         <div className="radio">
             <label>
                <input type="radio" name="sex" value="1" onChange={this.sexChange} checked={ person.genderUser && person.genderUser.id == 1 } />
               <div>М</div>
                </label>
                <label>
                <input type="radio" name="sex" value="2" onChange={this.sexChange} checked={ person.genderUser && person.genderUser.id == 2 }/>
                <div>Ж</div>
             </label>
        </div>
    </div>

What I have tried:

But the minor issue on radio button, its not visible of which radio button is selected.

I have tried adding some functions on getSet like changing background. but still have same issue