Using setState with onChange does not update

What am I looking for? A way to use setState() on an input element that updates my state immediately with onChange.

What have I done so far?

I have two components, BooksApp and SearchBook. I am passing result to SearchBook as a prop to be rendered. Then I am capturing the changes on the input element using onChange. The onChange is calling the method I passed as a prop as well. React documentation says the following, but if I use a callback and then in the callback I invoke setState() it sounds to me that I am back at the same situation, because setState() will again be async:

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.

What is the issue? If the user erases the content of the input too quickly, although there is still a console.log('empty') in the console, the setState() does not run and thus result stays the same and does not become an empty array.

This is the content of App.js:

class BooksApp extends Component {
  state = {
    books: [],
    result: [],
    query: ''
  }
  updateQuery = (query) => {
    this.setState({ query: query.trim() })
  }
  objDigger = (arr, diggers) => {
    const digged = [];
    diggers.forEach((d) => {
      let o = {};
      o = arr.filter((a) => a.id === d);
      o.forEach((i) => {
        digged.push(i);
      })
    });
    return digged;
  }
  filterHelper = (result) => {
    const resultKeys = result.map((r) => r.id)
    const stateKeys = this.state.books.map((s) => s.id)
    // this.objDigger(this.state.books, stateKeys)

    // new books
    const newKeys = _array.difference(resultKeys, stateKeys);
    const newObjs = this.objDigger(result, newKeys)

    // existing books
    const existingKeys = _array.difference(resultKeys, newKeys)
    const existingObjs = this.objDigger(this.state.books, existingKeys);

    // search books
    const searchObjs = newObjs.concat(existingObjs);
    return searchObjs;
  }
  searchBook = (query) => {
    this.updateQuery(query);
    if (query) {
      BooksAPI.search(query).then((result) => {
        result = this.filterHelper(result)
        if (!result.error) {
          this.setState({
            result,
          })
        }
      })
    } else {
      console.log('empty');
      this.setState(state => ({
        result: []
      }));
    }
  }
  appHandleChange = (query) => {
    console.log('searching');
    this.searchBook(query);
  }
  render() {
    return (
      <div className="app">
        <Route path="/search" render={() => (
          <SearchBook
            result={ this.state.result }
            onChange={ this.appHandleChange }
            onChangeShelf={ this.changeShelf }/>
        )}>
        </Route>
      </div>
    )
  }
}

This is the content of SearchBook:

class SearchBook extends Component {
  handleChange = (book, newShelf) => {
    this.props.onChangeShelf(book, newShelf);
  }
  handleInputChange = (event) => {
    this.props.onChange(event.target.value);
  }
  render() {
    const { result } = this.props;

    return (
      <div className="search-books">
        <div className="search-books-bar">
          <Link
            to="/"
            className="close-search"
          >
            Close
          </Link>
          <div className="search-books-input-wrapper">
            <input
              type="text"
              placeholder="Search by title or author"
              onChange={ (event) => this.handleInputChange(event) }
            />

          </div>
        </div>

        <div className="search-books-results">
          <ol className="books-grid">
            {result.length>0 && result.map((book) => (
              <li key={book.id}>
                <div className="book">
                  <div className="book-top">
                    <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks && book.imageLinks.smallThumbnail})` }}></div>
                    <BookShelfChanger
                      shelf={book.shelf ? book.shelf : 'none'}
                      onChangeShelf={(newShelf) => {
                        this.handleChange(book, newShelf)
                      }}
                    ></BookShelfChanger>
                  </div>
                  <div className="book-title">{book.title}</div>
                  <div className="book-authors">{book.authors}</div>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    )
  }
}