React Bootstrap table 2 search issue

Question

We are using a React-bootstrap-table for the table and we are facing an issue in searching the data in the table while using pagination it searches data only for the first page.

For pagination, we have used pagination props:

pagination={ paginationFactory()}

code mentioned below:

import BootstrapTable from 'react-bootstrap-table-next';
    import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
    
    const { SearchBar } = Search;
    const columns = [{
      dataField: 'id',
      text: 'Product ID'
    }, {
      dataField: 'name',
      text: 'Product Name'
    }, {
      dataField: 'price',
      text: 'Product Price'
    }];
  

       const products = [
  { id: 1, name: "apple", price: 1 },
  { id: 2, name: "orange", price: 2 },
  { id: 3, name: "banana", price: 3 },
  { id: 4, name: "peach", price: 2 },
  { id: 5, name: "carrot", price: 1 },
  { id: 6, name: "grapes", price: 4 },
  { id: 7, name: "mango", price: 1 },
  { id: 8, name: "potatoe", price: 3 },
  { id: 9, name: "onion", price: 3 }
];
    
    <ToolkitProvider
      keyField="id"
      data={ products }
      columns={ columns }
      search
    >
      {
        props => (
          <div>
            <h3>Input something at below input field:</h3>
            <SearchBar { ...props.searchProps } />
            <hr />
            <BootstrapTable
              { ...props.baseProps }
              pagination={ paginationFactory()
            />
          </div>
        )
      }
    </ToolkitProvider>