Массовое выделение в таблице с нумерацией страниц ReactJS

Question

У меня была проблема с массовым выделением строк из таблицы. Дело в том, что я, например, если я нажму на кнопку «Выбрать все» из таблицы и перейду на следующую страницу, все элементы будут сняты.

Я использую нумерацию страниц с сервера. Т.е. логично, что я не знаю, какие элементы будут загружены на новую страницу и что их нужно выбрать. Есть ли способ помочь исправить это? видео

  //Method that generates the checkbox "Select all"

  renderBulkSelector() {
    if (Rails.abilities.manageLead === false) return null;

    const { selectedItems, records } = this.props;

    const selectedItemsCount = Object.keys(selectedItems).length;
    let checked = records.data && selectedItemsCount === records.data.length;

    if (checked === undefined) {
      checked = false;
    }
    const checkedProp = {
      checked,
      onChange: () => {},
      onClick:  this.onBulkSelect,
    };

    const id = UUID();

    return (
      <th className="d-md-table-cell text-center" width="1%">
        <div className="custom-control custom-checkbox mt5">
          <input type="checkbox" className="custom-control-input" id={id} {...checkedProp} />
          <label className="custom-control-label custom-control-heading-label" htmlFor={id} />
        </div>
      </th>
    );
  }

  onBulkSelect() {
    const { table, records, selectedItems } = this.props;
    if (!records.data) return; // Fix for https://github.com/brokerkit/webapp/issues/2274
    const selectedItemsCount = Object.keys(selectedItems).length;
    const checked = records.data && selectedItemsCount === records.data.length;

    this.setState({
      tableBulkSelecting: !checked,
    });

    if (!checked) {
      AgentActions.selectLeadItems(table, records.data);
    } else {
      AgentActions.deselectLeadItems(table, records.data);
    }
  }