Как динамически добавить ДИВ и ссылку в React и при этом изменить их атрибуты?

Добрый день. Задача состоит в следующем - есть поле для вводе и кнопка, по нажатию которой происходит запрос на OPM для получения координатов определенного географического объекта, после чего выводится ссылка с его названием, по нажатию на которую открывается модальное окно с координатами этого объекта. Если в поле ввести другой объект и нажать на кнопку, то ниже появляется еще одна ссылка, по нажатию на которую также появляется модальное окно. Динамическое добавление я сделал, часть кода ниже:

onChangeState = (obj) => {
  const position = obj.posit;
  const lat = obj.latid;
  const lon = obj.long;
  const region = document.getElementById('region').value;
  const typeRegion = document.getElementById('typeRegion').value;
  const coordin = this.state.mainPosit;
  const link2 = this.state.newLink;
  this.setState({ coordin: coordin.push(`Центр географического объекта: широта - ${lat}, долгота - ${lon}. КООРДИНАТЫ
    ОБЪЕКТА: ${position}`) });
  this.setState({ link2: link2.push(`${region}, Тип объекта: ${typeRegion}`) });
}
render() {
    const region = document.getElementById('region').value;
    const shortName = '#' + region.substring(0, 5);
    const shortName2 = region.substring(0, 5);
    const listLink = this.state.newLink.map((item, index) => {
      return <a key={index} href={shortName} data-toggle="modal">{item}</a>;
    });
    const coordinates = this.state.mainPosit.map((item, index) => {
      return <div key={index} className="modal" id={shortName2} tabIndex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        <button type="button" className="close" data-dismiss="modal" aria-hidden="true">Закрыть</button>
        <p id="centreCoordinates">{item}</p>
      </div>;
    });
    return (
            <div>
              <button onClick={this.geoPosit}>Отправить</button>
              {listLink}
              {coordinates}
            </div>
    )
}

}

Но проблема в том, что для связки ссылки и модального окна должны совпадать атрибуты href у и id у . У меня же при каждом нажатии на кнопку они заменяются. Как сделать привязку к конкретному географическому объекту? То есть если я делаю запрос на город Москву, то у меня появляется ссылка "Москва", по нажатию на которую открываются координаты Москвы. Далее если я запрошу координаты Калуги, появляется ссылка "Калуга" и при нажатии ее координаты. Но при этом если я нажму на Москву, откроются ее координаты, а не Калуги.

Если есть другое решение буду рад его услышать.