Как удалить ключ из моего ввода при сбросе ввода?

У меня есть форма поиска с несколькими входами.

Форма имеет кнопку сброса, чтобы начать новый поиск. В настоящее время у меня это работает, так что значение очищается от состояния. Проблема в том, что значение ключа не удаляется, поэтому ввод включается в новый поиск только с пустым ключом. Это приводит к тому, что поиск включает пустые ключи как часть строки запроса.

Например. Это строка запроса с добавленным пустым ключом:

http://api/ixmasterdocument?filter=IDXT002|&filter=IDXT001|1111

Как видите, filter=IDXT002| пуст и включается в строку запроса с правильной парой ключ-значение filter=IDXT001|1111

Вот мой метод сброса, который очищает значение ключа из состояния.

clear = () => {
  let emptyValues = JSON.parse(JSON.stringify(this.state.formValues))
  Object.keys(emptyValues).forEach(key => emptyValues[key] = "")
  this.setState({
    formValues: emptyValues,
    contracts:[],
  }) 
}

Вот мой метод inputchange..

 handleInputChange = (e) => {
      console.info("==handleInputChange= = ")
      let newValues = JSON.parse(JSON.stringify(this.state.formValues))
      newValues[e.target.name] = e.target.value
      this.setState({
        formValues: newValues
      })
      console.info("newFormValues is: " + JSON.stringify(newValues))
    }

Вот метод отправки.

 handleFormSubmit = event => {  
    event.preventDefault();
    const formData = this.state.formValues
    let query = '';
    let keys = Object.keys(formData);
    keys.forEach(k => { 
      if (query !== "")
      query += `&`;
      query += `filter=`
      query += `${k}|${formData[k]}`

     })
     return this.loadContracts(query);
    };

Вот компонент ввода с кнопкой сброса.

<form className = "form-inline col-md-12" onReset = {this.props.handleFormReset}>

   {this.props.labels.map(label => (
     <div className = "card border-0 mx-auto" style = {styles} key = {label.Id}>
          <ul className = "list-inline ">
             <span>
               <li>
                 <Labels  htmlFor = {label.DisplayName} >{label.DisplayName}:</Labels>
               </li>
               <li >
                 <div>
                  <Input  
                   key = {label.Id}
                   onChange = {this.props.handleInputChange}
                   value = {this.props.formValues[label.DataField] ||""}
                   type = "search"
                   maxLength = "999"
                   style = {{height:34}}
                   name = {label.DataField ||""}

                   className = {"form-control mb-2 mr-sm-2"} 
                   id = {label.DataField}
                 />
                 State: {this.props.formValues[label.DataField]}

                 </div>

               </li> 
             </span>
         </ul>
     </div>
   ))}

  <div className = " col-sm-12">

  <Button
        style = {{ float: "left", marginBottom: 10 }} 
        className = "btn btn-success"
        type = "submit"
        onClick = {this.props.handleFormSubmit}
      >
        Search
      </Button>

      <Help />

      <Button
        style = {{ float: "left", marginBottom: 10 }} 
        className = "btn btn-secondary"
        // type = "reset"
        onClick = {this.props.clear}
      >
        Reset
      </Button>
  </div>
  </form>