Why can't get data from Input checkbox and radio in react?

Question

JavaScript

It is required to get data from the form, it does not come out to pull out the value of the flag and the radio, I tried both value and checked = undefined.

What's the matter?

class SecondWindow extends React.Component{
    state = {
        id: null,
        FIO: "",
        position:"",
        birthDay: "",
        sex: bool,
        fired: bool
    };
    
    handleOptionChange = e => {
        this.setState(
            {
                selectedOption:e.target.value
            }
        )
    }

    submitHandler = e => {
        e.preventDefault();
        

        const newUser = {
            id: Date.now().toString(),
            FIO: this.state.FIO,
            position:this.state.position,
            birthDay: this.state.birthDay,
            sex: this.state.sex ,
            fired: this.state.fired
        }
        console.log(this.state.fired.checked);
        console.log(this.state.sex);
      
        this.setState({
            FIO: ""
        })
    }

    changeInputHandler = e => {
        e.persist();
        this.setState(prev=>({...prev, ...{
            [e.target.name]: e.target.value
        }}))
    }
    

    render() {
        return (
            <form onSubmit={this.submitHandler}>
                <div className="input-group mb-3">                    
                    <input type="text" className="form-control" placeholder="ФИО"
                    name="FIO" 
                    onChange={this.changeInputHandler}></input>
                </div>
                <select className="form-select" aria-label="Default select example"
                name ="position"
                onChange={this.changeInputHandler}>        
                    <option value="Старший разработчик">Старший разработчик</option>
                    <option value="Младший разработчик">Младший разработчик</option>
                    <option value="Эйчар">Эйчар</option>
                    <option value="Уборщик">Уборщик</option>
                </select>

                <div className="form-group ">                
                    <div className="mb-3"></div>
                        <input className="form-control" type="date"  id="example-date-input"
                        name ="birthDay"
                        onChange={this.changeInputHandler}></input>  
                </div>
              


               
                <div className="form-check">
                    <input className="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"
                     name ="sex"
                     onChange={this.changeInputHandler}
                    ></input>
                    <label className="form-check-label" htmlFor="flexRadioDefault1">
                    М
                    </label>
                </div>
                <div className="form-check">
                    <input className="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"
                    name ="sex"
                    onChange={this.changeInputHandler}
                    ></input>
                    <label className="form-check-label" htmlFor="flexRadioDefault1">
                    Ж
                    </label>
                
                </div>

                
                
                <div className="form-check">
                    <input className="form-check-input" type="checkbox"  id="flexCheckDefault"
                    name ="fired"
                    onChange={this.changeInputHandler}
                    ></input>
                    <label className="form-check-label" htmlFor="flexCheckDefault">
                    Уволен
                    </label>
                </div>
                <button type="button" className="btn btn-success" type="submit">Добавить нового сотрудника</button>
                <button type="button" className="btn btn-danger" type="submit">Удалить выбранного сотрудника</button>  
            </form>
        );
    }
}

Answer 1

sex: bool,
fired: bool

What is bool? Fix:

sex: null,
fired: false

console.log(this.state.fired.checked);

What the hell is this anyway? The checked property is on the element, but not on the value in the state. Just fired.
Radio buttons - set value, remove id, place inside labels (remove for from them, respectively). Well, the input tag itself, it is unpaired. So remove the closing tags, add a slash to the end of the opening tags.
Let the onChange handler look like this:

changeInputHandler = ({ target: t }) => {
  this.setState(() => ({
    [t.name]: t.type === 'checkbox' ? t.checked : t.value,
  }));
}