Реактивный поиск в реальном времени не отображает элементы поиска

Question

Я написал функцию livesearch для React. Если вы начнете печатать в поле поиска, элементы начнут перерисовываться. Когда поиск не находит совпадений, отображается сообщение «результаты не найдены». Эта часть работает правильно. Но если вы начнете удалять входные данные поиска, функция начнет сопоставлять значения, но ничего не произойдет. Список пуст. Он должен вернуть вещи обратно, но это не так. Я не уверен, как это изменить.

const userName = sessionStorage.getItem('login');

 class Chart extends Component {
  constructor(props) {
     super(props);
      this.state = {
         data: props.data,
         pageOfItems: [],
     };
    this.onChangePage = this.onChangePage.bind(this);
   }
   onChangePage(pageOfItems) {
    this.setState({pageOfItems});
   }
   notFound() {
    return <div>Results was not found</div>;
  }

   render() {
    return (<section className="chart">
      <PageTitle titleClass="page-title" titleText="Chart" />
      {!userName ? <div className="login-page">
       <Link to="/login">
       Log In</Link> 
       to See Your Job Chart</div> : 
        this.props.data.length ?
        this.state.pageOfItems.map((item, index) => (
         <Card key={index}
          position={item.position}
          company={item.companyName}
          salary={item.salary}
          vacancyStatus={item.status}
          roadTime={item.roadTime}
          workTime={item.minutes}
         />
       )) : this.notFound()
         }
       {!userName ?
        <div></div> :
         this.props.data ?
          <Pagination
           items={this.props.data}
           onChangePage={this.onChangePage}/> :
           "" }
    </section>);
  }
}

Функция для обработки поиска:

  onSearchChange = (event) => {
  const filteredData = this.props.filter.filter(dataItem => {
    return dataItem.position.toLowerCase().includes(event.target.value.toLowerCase())
  });
  this.setData(filteredData);
};