Текущие данные из API выборки при открытии модального

Question

Я создал Компонент, в котором я использую API выборки, а затем отображаю эти данные, но когда я нажимаю на текущий объект или связываюсь с нами по текущему объекту, он возвращает как идентификатор объекта в консоли, так и последний идентификатор в Модальное Всплывающее. Моя логика.

  componentDidMount() {
    this.showTitle();
    fetch("https://api.myjson.com/bins/6m0pe/")
      .then(res => res.json())
      .then(resData =>
        this.setState({
          isLoaded: true,
          items: resData
        })
      );
  }

{this.state.items.map((data, index) => {
                return (
                  <>
....
<Button onClick={this.open}>Contact us</Button>
                      <Modal show={this.state.show} onClose={this.close}>
                        <Modal.Content>
                          <Section style={{ backgroundColor: "white" }}>
                            Current ID : {console.log(data.id)}
                          </Section>
                        </Modal.Content>
                      </Modal>
                    </Columns.Column>
                  </>
                );
              })}

Как я могу получить эти данные об объектах в событии Modal on Buttons 'onclick?

Вот так выглядит модал, даже если я нажимаю на первый идентификатор: ожидаемый результат должен быть DR001