JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div class="map" id="map"></div>
<div class="contactsMap__cards"></div>

CSS

html, body {
  margin: 0;
}

.map {
	width: 100vw;
  height: 100vh;
}

JavaScript

ymaps.ready(init);

function init() {
  // Locations
  let items = [
    {
      center: [50.426472, 30.563022],
      name: 'ТЦ «7 Континент»',
      address: 'ул. Магомеда Ярагского, 30',
      background: 'blue'
    },
    {
      center: [50.45351, 30.516489],
      name: 'DonutsDay',
      address: 'г. Махачкала, ул. Лаптиева 49а',
      background: 'red'
    },
    {
      center: [50.454433, 30.529874],
      name: 'DonutsDay',
      address: 'г. Махачкала, ул. Дзержинского 8',
      background: 'yellow'
    }
  ];
  
  let
    myMap = new ymaps.Map('map', {
      center: [50.443705, 30.530946],
      zoom: 14
    }, {
      searchControlProvider: 'yandex#search'
    }),
    menu = $('.contactsMap__cards');

  for ( let j = 0, m = items.length; j < m; j++ ) {
    createMenu(items[j]);
  }

  function createMenu(item) {
    let
      card = $('<div class="contactsMapCard contactsMapCard_background_' + item.background + '"><div class="contactsMapCard__title">' + item.name + '</div><div class="contactsMapCard__address">' + item.address + '</div></div>'),
      placemark = new ymaps.Placemark(item.center, {
        balloonContent: item.name
      });

    myMap.geoObjects.add(placemark);

    card.appendTo(menu).click(function () {
      if (!placemark.balloon.isOpen()) {
        myMap.setCenter(item.center);
        placemark.balloon.open();
      } else {
        placemark.balloon.close();
      }
    });
  }
};