Реагируйте модально в таблице реакции, не возвращая уникальный контент для каждой строки

Question

Я использую response-modal и response-bootstrap-table2 для отображения значений строки в модальном режиме.

Прямо сейчас модал отображает последние значения строк независимо от того, по какой строке щелкнули. Как мне убедиться, что каждый модал отображает свои собственные данные строк?

renderButtons = (cell, row, rowIndex) => {
return (
  <span>
    <button onClick={this.openModal}>Details</button>
    <Modal
      isOpen={this.state.modalIsOpen}
      onAfterOpen={this.afterOpenModal}
      onRequestClose={this.closeModal}
      style={customStyles}
      contentLabel="Example Modal"
    >
      <div>
        <h2 ref={subtitle => (this.subtitle = subtitle)}>{cell} title</h2>
        <button onClick={this.closeModal}>close</button>
        {cell}- {row.name}
        {row.record_type}: {row.specific_type}: {row.health_name}
      </div>
    </Modal>
  </span>
);
};

renderButtons используется в таблице:

renderRecordsTable() {
    const records = this.props.records;
    const isPerson = this.props.recordable_type == 'user';

    const columns = [
      {
        dataField: 'id',
        formatter: this.renderButtons,
        text: '',
        headerTitle: false
      }

    ];
    return (
      <BootstrapTable
        keyField="id"
        data={records}
        columns={columns}
        filter={filterFactory()}
      />
    );
  }

и в моих компонентах рендеринга

render() {
  return (
    <div name="records" className="content">
        {this.renderRecordsTable()}
    </div>
  );
}