ReactJs -Боковая фильтрация

Question

Я пытаюсь создать таблицу реакций на стороне сервера с возможностью фильтрации.

API вызывает нормально.

Но, когда я ввожу один символ (например, A) в столбце фильтра, он вызывает API, но значение фильтра не передается. если я набираю два символа (например, XY) в столбце фильтра, он вызывает API два раза, первый API не имеет и фильтрует данные, а второй API отправляет данные фильтра следующим образом - {id: "title", значение: "ИКС"}. он отправляет только первый символ. если я ввожу три символа, он принимает только первые два символа.

Это мой компонент. Я устанавливаю отфильтрованное значение в состояние, а затем перехожу к API.

<ReactTable
      ...
      onFetchData={(state, instance) => {
        this.setState({ loading: true });
        SliderApis.getSliders({
          ...
          filter: this.state.filtered
        }).then(res => {
          this.setState({
            data: res.data.data,
            page: 10,
            loading: false
          });
        });
      }}
      onFilteredChange={(filtered, column) => {
        this.setState({
          pageSize: 10,
          filtered: filtered
        });
      }}
/>

Я думаю, что проблема в том, что API вызывается перед установкой «отфильтрованного» состояния

Спасибо за авансовый.