JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
  padding: 0px;
  margin: 0;
}

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

JavaScript

const items = [
  { coord: [ 55.751244, 37.618423 ], title: 'Moscow', content: 'hello, world!!' },
  { coord: [ 48.864716, 2.349014 ], title: 'Paris', content: 'fuck the world' },
  { coord: [ 34.052235, -118.243683 ], title: 'Los Angeles', content: 'fuck everything' },
];

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


  const marker = new ymaps.Placemark(items[0].coord, {
    balloonContent: balloonContent(items[0]),
  });
  map.geoObjects.add(marker);


  document.querySelector('#buttons').innerHTML = items
    .map(n => `<button>${n.title}</button>`)
    .join('');

  document.querySelectorAll('#buttons button').forEach((n, i) => {
    n.addEventListener('click', onClick.bind(n, items[i]));
  });


  function onClick(item) {
    map.setCenter(item.coord);
    marker.geometry.setCoordinates(item.coord);
    marker.properties.set('balloonContent', balloonContent(item));
  }

  function balloonContent(item) {
    return `<b>${item.content}</b>`;
  }
});