反応ブートストラップテーブルからの選択に基づいてjson配列をフィルタリングするにはどうすればよいですか？

onSelectアクションとボタンクリックアクションの両方に同じ関数を渡したようですが、操作が異なります。また、将来の問題を回避するために可能なすべてのアクションを処理します

このサンドボックスの完全に機能するコードをチェックアウトする

import React from "react";
import ReactDOM from "react-dom";
import MYResult from "../json/results.json";
import BootstrapTable from "react-bootstrap-table-next";

import "./styles.css";

class Container extends React.Component {
  state = {
    data: MYResult.Products || [],
    pristineData: MYResult.Products || [],
    columns: MYResult.ParametricList_Attributes || [],
    isCompareClicked: false,
    selected: []
  };

  onSelectClick = (row, isSelect) => {
    let modifiedRow;
    if (isSelect) {
      modifiedRow = [...this.state.selected, row.PartNumber];
    } else {
      modifiedRow = this.state.selected.filter(x => x !== row.PartNumber);
    }
    this.setState({ isCompareClicked: true, selected: modifiedRow });
  };
  onButtonClick = () => {
    const data = this.state.data;
    const selectedData = this.state.selected;
    if (selectedData.length < 2) {
      alert("atleast two data needed to compare");
      return;
    }
    let filterredData = data.filter(row =>
      selectedData.includes(row.PartNumber)
    );
    this.setState({ data: filterredData });
  };

  onSelectAll = (isSelect, rows) => {
    let newRows = isSelect ? rows.map(row => row.PartNumber) : [];
    this.setState({ selected: newRows });
  };

  onClearClick = () => {
    this.setState(state => ({ data: state.pristineData, selected: [] }));
  };

  render() {
    console.log(this.state);
    var selectRowProp = {
      mode: "checkbox",
      clickToSelect: true,
      selected: this.state.selected,
      onSelect: this.onSelectClick,
      onSelectAll: this.onSelectAll
    };

    return (
      <div>
        <button onClick={this.onButtonClick}>Compare</button>
        <button onClick={this.onClearClick}>Clear</button>
        <br />
        <br />
        <BootstrapTable
          keyField="PartNumber"
          selectRow={selectRowProp}
          data={this.state.data}
          columns={this.state.columns}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Container />, rootElement);