JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
  margin: 0;
}

#map {
	width: 100vw;
  height: calc(100vh - 100px);
}

.active {
  color: red;
  font-weight: bold;
  font-size: 32px;
}

JavaScript

const items = [
  { id: 1, coord: [ 55.7456, 37.3466 ], title: 'hello, world!!' },
  { id: 2, coord: [ 55.6293, 37.9072 ], title: 'fuck the world' },
  { id: 3, coord: [ 55.8412, 37.7235 ], title: 'fuck everything' },
];

ymaps.ready(function () {
  const map = new ymaps.Map('map', {
    center: [ 55.751574, 37.573856 ],
    zoom: 9,
    controls: [],
  });

  const markers = new ymaps.GeoObjectCollection();

  items.forEach(n => {
    const marker = new ymaps.Placemark(n.coord, { itemId: n.id });
    marker.events.add('click', onMarkerClick);
    markers.add(marker);
  });

  map.geoObjects.add(markers);


  function onMarkerClick(e) {
    const
      marker = e.get('target'),
      id = marker.properties.get('itemId');

    document.querySelectorAll('[data-id]').forEach(n => {
      n.classList.toggle('active', +n.dataset.id === id);
    });

    markers.each(n => n === marker
      ? n.options.set('preset', 'islands#redIcon')
      : n.options.unset('preset')
    );
  }
});

document.querySelector('#items').innerHTML = items.map(n => `<div data-id="${n.id}">${n.title}</div>`).join('');