checkbox whit React js and state undefined Value

I am creating a filtering form to filter my data based on the checkboxes which will have a value of true or false but I don't know why I have the value undefined.

My code: The Constructor:

constructor(props){
    super(props)
    this.state={
      rfp:false,
      rfx:false,
      rfp_x:false,
      allclassification: false,
    }
this.onChange =  this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
   }

onChange:

onChange(e){
    this.setState({ [e.target.name]: e.target.checked });
}

onSubmit:

onSubmit(e){
    e.preventDefault();
    const FilterClassification = {
        // classification
        rfx:this.state.rfx,
        rfp:this.state.rfp,
        rfp_x:this.state.rfp_x,
        allclassification:this.state.allclassification,
    }
    console.log(FilterClassification)

    axios.post("http://localhost:8080/MenuFiltre/filtreregioncloser",FilterClassification )
}

HTML:

<form onSubmit={this.onSubmit}>
<fieldset>
<legend>RFX/RFP:</legend>
<div className="form-check">
  <input type="checkbox" className="form-check-input" onChange={this.onChange}  value={this.state.rfx} name="rfx" id="rfx" />
  <label className="form-check-label"  name="rfx">RFX</label>
  &nbsp; &nbsp; &nbsp; &nbsp;

  <input type="checkbox" className="form-check-input" onChange={this.onChange}  value={this.state.rfp}  name="rfp" id="rfp"  />
  
  <label className="form-check-label" >RFP</label>
  &nbsp; &nbsp; &nbsp; &nbsp;

  <input type="checkbox" className="form-check-input" onChange={this.onChange}  value={this.state.rfp_x}  name="rfp_x" id="rfp_x"/>
  <label className="form-check-label" >RFP(X)</label>
  &nbsp; &nbsp; &nbsp; &nbsp;


  <input type="checkbox" className="form-check-input"  onChange={this.onChange} name="allclassification" id="allclassification" />
  <label className="form-check-label"  name="all" id="all">ALL</label>
</div>
</from>

undefined value False value