Recalculate pagination when filter request is applied

I have this React page generated by JHipster:

import ......

export interface IOrdersProps extends StateProps, DispatchProps, RouteComponentProps<{ url: string }> {}

export const Orders = (props: any) => {
  const [paginationState, setPaginationState] = useState(
    overridePaginationStateWithQueryParams(getSortState(props.location, ITEMS_PER_PAGE, 'id'), props.location.search)
  );

  const [searchNameParam, setSearchNameParam] = useState('');
  const lastSearchNameParam = useRef(searchNameParam);

  const [ordersList, setOrdersList] = useState<any>([]);
  const [itemsSize, setItemsSize] = useState<any>([]);
  const [tradesList, setTradesList] = useState<any>();
  const [twapList, setTwapList] = useState<any>();

  const getAllEntities = async () => {
    const page = paginationState.activePage - 1;
    const itemsPerPage = paginationState.itemsPerPage;
    console.log('Refreshing page: ' + page);
    const apiUrl = 'api/orders?page=' + page + '&size=' + itemsPerPage + '&searchNameParam=' + searchNameParam;

    const result = await axios.get<IOrders>(apiUrl);

    setOrdersList(result.data);
  };

  const sortEntities = () => {
    getAllEntities();
    const endURL = `?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}`;
    if (props.location.search !== endURL) {
      props.history.push(`${props.location.pathname}${endURL}`);
    }
  };

  useEffect(() => {
    sortEntities();
  }, [paginationState.activePage, paginationState.order, paginationState.sort]);

  useEffect(() => {
    const request = async () => {
      const apiUrl = 'api/ordersCount';
      const result = await axios.get<IOrders>(apiUrl);
      setItemsSize(result.data);
    };
    request();
    getAllEntities();
  }, []);

  const sort = p => () => {
    setPaginationState({
      ...paginationState,
      order: paginationState.order === 'asc' ? 'desc' : 'asc',
      sort: p,
    });
  };

  const handlePagination = currentPage => {
    setTradesList(null);
    setTwapList(null);
    setPaginationState({
      ...paginationState,
      activePage: currentPage,
    });
  };

  const handleSyncList = () => {
    sortEntities();
  };

  const { match, loading, totalItems } = props;

  useEffect(() => {
    if (searchNameParam !== lastSearchNameParam.current) {
      handleSyncList();
      lastSearchNameParam.current = searchNameParam;
    }
  }, [searchNameParam])

  return (
    <div>    
          <div>    
              <Table>
                ............
                <thead>
                  <tr>
                    <th>                         
                      <div>
                        <span>Filter</span>
                        <input onChange={e => setSearchNameParam(e.target.value)}/>
                      </div>
                      ................                   
                  </tr>
                </thead>
                {ordersList && ordersList.length > 0 ? (
                <tbody>
                  {ordersList.map((orders, i) => (
                    
                  ))}
                </tbody>
                ) : (
                  !loading && <div className="alert alert-warning">No Orders found</div>
                )}
              </Table>

          </div>

          {/*{props.totalItems ? (*/}
          <div className={ordersList && ordersList.length > 0 ? '' : 'd-none'}>
            {/*<Row className="justify-content-center">*/}
            {/*  <JhiItemCount page={paginationState.activePage} total={totalItems} itemsPerPage={paginationState.itemsPerPage} />*/}
            {/*</Row>*/}
            <Row className="justify-content-center">
              <JhiPagination
                activePage={paginationState.activePage}
                onSelect={handlePagination}
                maxButtons={5}
                itemsPerPage={paginationState.itemsPerPage}
                totalItems={itemsSize}
              />
            </Row>
          </div>
        </Tab>
        <Tab eventKey={'Asset Volumes'} title="Asset Volumes" onSelect={() => {}}>
          <AssetVolumes />
        </Tab>
      </Tabs>

    </div>
  );
};

const mapStateToProps = ({ orders }: IRootState) => ({
  ordersList: orders.entities,
  loading: orders.loading,
  totalItems: orders.totalItems,
});

const mapDispatchToProps = {
  getEntities,
};

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(mapStateToProps, mapDispatchToProps)(Orders);

When I enter something into search area API request is made and new data is populated.
But pagination is not updated.
How I can force the pagination pages to be recalculated when I receive new pages of data with search criteria?