react boostrap table remote filter not working

Question

i am trying to implement remote filter, and following below documentation to implement..

react bootstrap table

my code.

    const columns = [{
    dataField: 'vhRegNo',
    text: 'Vehicle Number',
    sort: true,
    filter: textFilter()
  }, {
    dataField: 'type',
    text: 'Fuel Type',
    sort: true,

  }];

my remote code

 const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
<div>
  <BootstrapTable striped hover
    remote={ { filter: true , pagination: true} }
    condensed
    keyField='id'
    data={data}
    columns={columns}
    rowEvents={rowEvents}
    expandRow={expandRow}
    filter={ filterFactory() }
    pagination={paginationFactory({ page, sizePerPage, totalSize })}
    onTableChange={onTableChange}
  />
</div>

);

const handleTableChange = (type, { page, sizePerPage }) => {

pagination.selectedPage = page;
pagination.sizePerPage = sizePerPage;
retrieveVehicleEntries(pagination);

}

const retrieveVehicleEntries = (pagination) => {
VehicleDataService.getAll(pagination.selectedPage, pagination.sizePerPage)
  .then(response => {
    setVehicleEntries(response.data.pageableObj);
    setPageMO(response.data);
    console.log(response.data);
  })
  .catch(e => {
    console.log(e);
  });

};

also i am able to get the filter datafield with below code..

for (const dataField in filters) {
      const { filterVal, filterType, comparator } = filters[dataField];

      if (filterType === 'TEXT') {
        if (comparator === Comparator.LIKE) {
          valid = row[dataField].toString().indexOf(filterVal) > -1;
        } else {
          valid = row[dataField] === filterVal;
        }
      }

my page

but the issue is, when ever i type a value in the filter text box, the value is not retaining after my table get refreshed with new set of pagination data. but in the example link the text is getting retained, not able to debug what is issue, since there are no issues in the console either... need help on this..