Поиск и страница в ReactJS

Я работаю с ReactJS, перечисляя данные, отображаемые в таблице, и фильтруя входные данные.

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

Это мой код:

Государство:

  state = {
    searchText: '',
    currentPage: 1,
    itemsOnPage: 3,
  };

Таблица с фильтром:

  dataTable = () =>{

const { currentPage, itemsOnPage, searchText } = this.state;
const { clients } = this.props;

const filterData = clients.filter( client => {
  return client.name.toLowerCase().indexOf(searchText.toLowerCase() ) !== -1
})

const indexOfLastItem = currentPage * itemsOnPage;
const indexOfFirstItem = indexOfLastItem - itemsOnPage;
const currentItems = filterData.slice(indexOfFirstItem, indexOfLastItem);


const renderItems = currentItems.map((data, key) => {
      return (

        <Client
          key = {key}
          client  = {data}
        />
      )
    });
    return renderItems;
  }

Пагинация:

  paginationNumbers = () =>{
    const { clients } = this.props;
    const { itemsOnPage, searchText } = this.state;
    const filterData = clients.filter( client => {
      return client.name.toLowerCase().indexOf(searchText.toLowerCase() ) !== -1
    })
    const pagesToNumbers = [];
    for (let i = 1; i <= Math.ceil(filterData.length / itemsOnPage); i++) {
      pagesToNumbers.push(i);
    } 

    let lastItem = pagesToNumbers[pagesToNumbers.length-1];

    const numbers = pagesToNumbers.map(number => {
      return (
          <li className = "waves-effect"
           key = {number} 
           id = {number}
           className = { this.state.currentPage === number ? "active" : null }
           onClick = {this.handleClick} style = { styles.paginationButtons }
           >
               {number}
          </li>
      );
    });

    return (
      <React.Fragment>
        <li className = { this.state.currentPage === 1 ? "hide" : "waves-effect" }
        onClick = {this.handlePrevious}
        >
        <i className = "material-icons">chevron_left</i></li>
          { numbers }
        <li className = { this.state.currentPage === lastItem ? "hide" : "waves-effect" }
         onClick = {this.handleNext}
        >
        <i className = "material-icons">chevron_right</i></li>
      </React.Fragment>
    );
  }

Действия кнопок:

  handlePrevious = () => {
    this.setState({
      currentPage: this.state.currentPage -1 
    })
  }

  handleNext = () => {
    this.setState({
      currentPage: this.state.currentPage +1 
    }) ;
  }

  handleClick = (e) => {
    this.setState({
        currentPage: Number(e.target.id)
      });
  }

При изменении Вход в фильтр:

  onChange = e => {
    this.setState({ searchText: e.target.value });
  }

Вот код при рендеринге:

        <input
            name = "searchText"
            value = {searchText}
            onChange = {this.onChange}
          />  

      <div className = "col s12">
          <input
            name = "searchText"
            value = {searchText}
            onChange = {this.onChange}
          />
      </div>

Большое спасибо!