No se pueden restablecer los campos de entrada después de enviar el formulario en React

Tengo un formulario con campos de entrada. Después de enviar el formulario, los campos de entrada deben borrarse. Traté de establecer el estado en una matriz vacía, no funcionó, luego intenté usar referencias, tampoco funcionó para mí ...

Esta función activa el evento onSubmit.

addHaspInfo = (e) => {  
 // e.preventDefault();  
    axios.post("/hasp", {
      company: {
            name: e.target[3].value,
            city: e.target[4].value,
            phone: e.target[5].value
            },
            numberOfKeys: e.target[2].value,                      
            serial: e.target[0].value,
            soft: e.target[1].value,
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      })
      axios.get("/hasp") 
      .then((haspData) => {
        console.log(haspData.data);
        this.setState({
          hasps: haspData.data
        });
      }); 
      this.setState({
          hasps: []      //this don't reset input fields
        });        
  }

<form id="formId" className="form-group haspAddForm" onSubmit={this.addHaspInfo}>

Ant esto tampoco funcionó:

 clearInput = () => {
        this.setState({hasps: []});
        ReactDOM.findDOMNode(this.refs.myInput).focus();  //this don't reset input fields
       } 

<button onClick={this.clearInput} className="btn btn-primary" type="submit"  style={{marginBottom:'40px', marginRight: '110px'}}>Add new hasp info</button> 

Uno de los campos de entrada.

<input ref="myInput" type="text" className="form-control" value={this.state.serial} placeholder="00000-00000" required /><br />