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'
    }),
    openedItem = null,
    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>');

    card.appendTo(menu).click(function () {
      myMap.balloon.close();
      if (openedItem !== item) {
        openedItem = item;
        myMap.setCenter(item.center);
        myMap.balloon.open(item.center, {
          contentHeader: item.name,
          contentBody: '<p>' + item.address + '</p>',
        });
      } else {
        openedItem = null;
      }
    });
  }
};