Строка запроса не добавляется в API, если дважды не щелкнуть поиск в React

Моя строка запроса генерируется правильно, но не добавляется в API, пока я дважды не нажму кнопку поиска. После первоначального первого щелчка поиск каждый раз работает нормально. Если я не перезагружу страницу. То же верно и при использовании другого ввода для поиска.

Как вы можете видеть в консоли. Входные данные задаются в форме поиска.

Первый клик..

SearchForm.js:26 IDXT001 2222
API.js:8 The query string is undefined

Второй щелчок..

API.js:8 The query string is filter=IDXT001|2222

Это проблема со временем? Кажется странным, что он работает нормально после каждого последующего клика.

Апи..

search: function(query) {
console.info("The query string is " + query)
return axios.get("http://api/document?" + query );
},

Метод..

 loadContracts = (query) => {
  API.search(query)
  .then(res => {
    const contracts = res.data;
    this.setState({ contracts })
  })
  .catch(err => console.info(err));
};

кнопка отправить..

 handleFormSubmit = event => {
event.preventDefault();

const formData = this.state.formValues
let keys = Object.keys(formData);

keys.map(k => {
  let query = '';
  if (query !== "")
  query += `&`;
  query += `filter=`
  query += `${k}|${formData[k]}`

  this.setState({query}) ; 
  return this.loadContracts(this.state.query);
})
};

РЕДАКТИРОВАТЬ Не работает нормально каждый раз после первого нажатия. Если я изменю значение данных после первого щелчка, предыдущее значение будет добавлено в API. Так что это определенно проблема времени. Я предполагаю, что строка запроса добавляется в состояние после первого щелчка, а затем отправляется в API при следующем щелчке. Поэтому мне нужно изменить код, чтобы строка запроса была напрямую добавлена ​​в функцию loadcontracts или иметь .then перед отправкой в ​​​​состояние, а затем возвращать loadContracts ()?