Рендеринг текущего / выбранного элемента из Array.map в модальный

Итак, прямо сейчас я получаю текущий идентификатор элемента или любое другое свойство (которое поступает из JSON), но я не могу отобразить его внутри модального раздела.

Весь модальный файл находится внутри Array.map(), я получаю положительный результат от console.info(), но я не могу отобразить его внутри модального раздела, вот как я его использую.

  open(index) {
    this.setState({
      show: true
    });
    console.info(index);
  }


    render(){
    {
this.state.items.map((data, index) => {
                    return (
                      <>
    ...
                  <Button onClick = {this.open.bind(this, data.id)}>
                    Contact Us
                  </Button>
                  <Modal
                    show = {this.state.show}
                    onClose = {this.close}
                    closeOnBlur = {true}
                  >
                    <Modal.Content>
                      <Section style = {{ backgroundColor: "white" }}>
                        Current ID :
                      </Section>
                    </Modal.Content>
                  </Modal>

    }

Когда я нажимаю кнопку, он регистрирует правильный идентификатор. Но когда я пытаюсь отрендерить это в разделе, я не могу это сделать.

  currentElement(index) {
    return index;
  }

Я решил эту логику для рендеринга, но использование этого метода дает следующую ошибку: Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Вот как я использую указанную функцию

                <Modal.Content>
                  <Section style = {{ backgroundColor: "white" }}>
                    Current ID :{" "}
                    {this.currentElement.bind(this, data.id)}
                  </Section>

Вот демонстрация видео того, что происходит, мне нужен тот же идентификатор, который находится в console.info в DOM