[CryNet]

У меня есть компонент:

import React, {PureComponent} from 'react'

export default class Shop extends PureComponent {
  state = {
    search: "",
    filters: [],
    items: json
  };

  // проверяем какие фильтры выбрал юзер
  onFilterChange = ( event ) => {
    const checkboxes = [...event.currentTarget.closest(".filter").getElementsByTagName("input")]
    const filters = [];
    checkboxes.map(checkbox => {
      if (checkbox.checked) {
        filters.push(checkbox.name);
      }
    });
    this.setState({ filters }, this.filtredInput);
  }

  // фильтруем согласно выбранным фильтрам
  filtredInput() {
    let items = json

    if (this.state.search.length !== 0) {
      items = items.filter(word =>
        word.name.toLocaleLowerCase().indexOf(this.state.search.toLocaleLowerCase()) !== -1
      )
    }

    if (this.state.filters.length !== 0) {
      items = items.filter(element => this.state.filters.every(key => element[key]));
    }

    this.setState( {items} )
  }

  // смотрим, что вводит юзер
  onSearchChange = ( {currentTarget} ) => {
    const search = currentTarget.value
    this.setState({ search }, this.filtredInput() )
  }

  render() {
    return (
      <div>
        <div className="navigation">
          <Filter
            onFilterChange={this.onFilterChange}
          />
          <Search
            onSearchChange={this.onSearchChange}
          />
        </div>
        <Filtered
              items={this.state.items}
              updateShoppingBasket={this.updateShoppingBasket}
            />
      </div>
    )
  }
}

Помогите организовать логику так, чтобы одновременно работал и поиск, и фильтр. По отдельности всё работает отлично. Но в текущем варианте поиск работает как бы с задержкой (видимо код отрабатывает до установки стейта), но я не уверен в том, что нет других ошибок. Как правильно организовать логику фильтра + поиска?