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' },
  { coord: [ 48.864716, 2.349014 ], title: 'Paris' },
  { coord: [ 34.052235, -118.243683 ], title: 'Los Angeles' },
];

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

  items.forEach(n => map.geoObjects.add(new ymaps.Placemark(n.coord)));


  const buttons = document.querySelector('#buttons');

  buttons.innerHTML = items.map(n =>
    `<button data-coord="${JSON.stringify(n.coord)}">${n.title}</button>`
  ).join('');

  buttons.addEventListener('click', ({ target: { dataset: { coord } } }) => {
    if (coord) {
      map.setCenter(JSON.parse(coord));
    }
  });
});