Лучший способ показать дочерний модал на карте?

Ссылка на проект: https://repl.it/repls/PrudentAptSystems

У меня есть App.js и PageFive.js. App.js содержит массив:

state = {
    boxes: [
      {
        cbIndex: "cb1",
        name: "Bob"
      },
      {
        cbIndex: "cb2",
        name: "Daniel"
      },...

... и PageFive.js содержит функцию карты, которая отображает поля:

{this.props.boxes.map((box, id, image, moduleId) => (
            <div key={id} className="col-md-6 col-lg-4">
              <div className="sample-container">
                <div className="container">
                 <div className="row">
                  <div className="col-md-12">
                    <ul>
                      <li>
                        <input
                          type="checkbox"
                          id={box.cbIndex}...

Скриншот:

Я бы хотел, чтобы для каждого нажатия кнопки («Информация») появлялось другое модальное окно.

В настоящее время все работает как надо, за исключением того, что отображается только последний модальный элемент (их 6), независимо от того, какую кнопку «Информация» я выбираю:

Я использую Reactstrap, и остальная часть моего кода выглядит так:

(СтраницаFive.js):

class PageFive extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

JSX для кнопки и модального окна, которое вложено в функцию карты выше:

<Button color="danger" onClick={this.toggle.bind(this, moduleId)}>
{this.props.buttonLabel}
</Button>
<Modal
isOpen={this.state.modal}
toggle={this.toggle.bind(this, moduleId)}
className={this.props.className}
>
<ModalHeader toggle={this.toggle}>
    <p>hi </p>
</ModalHeader>
<ModalBody>
    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.
</ModalBody>
<ModalFooter>
    <Button color="primary" onClick={this.toggle}>
    Do Something
    </Button>{" "}
    <Button
    color="secondary"
    onClick={this.toggle}
    >
    Cancel
    </Button>
</ModalFooter>

Есть ли способ сделать это без использования порталов или Redux?