JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<div id="map" style="width: 400px; height: 400px;"></div>

JavaScript

var moscow = [55.75, 37.62];

function createRandomCoords() {
	return [moscow[0] + (Math.random() - 0.5)/2, moscow[1] + (Math.random() - 0.5)];
}

function createPlacemarks(length) {
  var placemarks = new Array(length);
  for (var i = 0, l = length; i < l; i++) {
  	placemarks[i] = new ymaps.Placemark(createRandomCoords());
  }
  return placemarks;
}

ymaps.ready(['Map', 'GeoObjectCollection', 'Placemark']).then(function () {
	var map = new ymaps.Map('map', { center: moscow, zoom: 9 }, {});
  var collection = new ymaps.GeoObjectCollection({ children: createPlacemarks(50) });
  
  map.geoObjects.add(collection);
  map.geoObjects.add(new ymaps.Placemark(moscow, {}, { iconColor: 'green' }));
  
  collection.events
  	.add('mouseenter', function (e) { e.get('target').options.set('iconColor', 'red'); })
  	.add('mouseleave', function (e) { e.get('target').options.unset('iconColor'); });
});