Сбросьте нумерацию страниц на первую страницу, нажав кнопку вне компонента

Question

Я использую UI материала usePagination hook для создания пользовательского компонента нумерации страниц, пока все хорошо, функциональность работает, как и ожидалось, но мне было интересно, как я могу сбросить нумерацию страниц на первый страницу нажатием кнопки, которая не является частью компонента нумерации страниц.

У кого-нибудь есть идеи, как вызвать это?

Это мой компонент.

import React from "react";
import PropTypes from "prop-types";
import { usePagination } from "hooks";

function arrow(type) {
  return (
    <i
      className={`fa fa-chevron-${
        type === "next" ? "right" : "left"
      } page-icon`}
    />
  );
}

function Pagination({ data, itemCount, onChange }) {
  const { items } = usePagination({
    count: Math.ceil(data.length / itemCount, 10),
    onChange
  });

  return (
    <nav aria-label="Paginator">
      <ul className="pagination-component">
        {items.map(({ page, type, selected, ...item }, index) => {
          let children;

          if (type === "start-ellipsis" || type === "end-ellipsis") {
            children = "…";
          } else if (type === "page") {
            children = (
              <button
                type="button"
                automation-tag={`page-${page}`}
                className={`page-button ${selected ? "selected" : ""}`}
                {...item}
              >
                {page}
              </button>
            );
          } else {
            children = (
              <button
                automation-tag={type}
                className="page-button"
                type="button"
                {...item}
              >
                <span className="d-none">{type}</span>
                {arrow(type)}
              </button>
            );
          }

          return (
            // eslint-disable-next-line react/no-array-index-key
            <li key={index} className="page-item">
              {children}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

Я пытаюсь создать компонент выбора, чтобы функция onChange сортировала данные в зависимости от выбора, но когда данные отсортированы, я хочу вернуть компонент разбиения на страницы на первую страницу

const TableVizContainer = props => {
  const [currentPage, setCurrentPage] = useState(1);
  const [sortColumn, setSortColumn] = useState(1);
  const [range, setRange] = useState({
    start: 0,
    end: 25
  });

  const onChangePage = (_event, page) => {
    setCurrentPage(page);
    setRange({
      start: 25 * (page - 1),
      end: 25 * page
    });
  };

  const onSelectChange = event => {
    const { value } = event.target;
    setCurrentPage(1);
    setSortColumn(parseInt(value, 10));
  };

  return (
    <div
      className="table-viz-container container-fluid my-4 float-left"
      automation-tag={`table-viz-${automationId}`}
    >
      <div className="d-flex justify-content-between mb-3 leaderboard-meta">
        <span className="leaderboard-title">{visualization.title}</span>
        <div className="mr-5">
          <label htmlFor="sort-table-select">
            Sort By:
            <select
              id="sort-table-select"
              onChange={onSelectChange}
              value={sortColumn}
            >
              {visualization.columns.map((column, index) => {
                const uniqueId = uuidv1();
                return (
                  <option key={uniqueId} value={index}>
                    {setSelectValue(column, visualization.metrics)}
                  </option>
                );
              })}
            </select>
          </label>
        </div>
      </div>
      <div className="d-block d-sm-flex justify-content-between align-items-center my-2 px-2">
        <span className="page-items-count" automation-tag="pagination-count">
          {`Showing ${range.start === 0 ? 1 : range.start + 1} - ${
            range.end <= visualization.rows.length
              ? range.end
              : visualization.rows.length
          } of ${visualization.rows.length}.`}
        </span>
        <Pagination
          currentPage={currentPage}
          data={visualization.rows}
          itemCount={25}
          onChange={onChangePage}
        />
      </div>
    </div>
  );
};

Кто-нибудь имеет представление о том, как сбросить и переместить страницу пагинации на первую, не щелкая компонент?