JSFiddle - React, Tailwind, and code Playground

HTML

<script>
	var coords = [ {lat: "57.81826138371238", lon: "28.319033888793932", id: 11, title: "121212"}];
</script>
 <div class="dealers-map" data-map="dealers" data-key="5ea22a53-783a-49c9-ba27-3692e65b83cb">
   
 </div>
 <script>
	var foreignCoords = [ {lat: "57.81826138371238", lon: "58.319033888793932", id: 11, title: "121212"}]);
</script>
 <div class="dealers-map" data-map="foreign" data-key="5ea22a53-783a-49c9-ba27-3692e65b83cb">
   
 </div>

CSS

.dealers-map {
  height: 250px;
  width: 500px;
}

JavaScript

$(function() {
  var map = $('.dealers-map');
  if(map.length) createMap(map);
});

function createMap(map) {
  var $map = map;

  if (!$map.length) return false;

  var BASE_URL = $('body').data('home');
  $map.each(function() {
    var $map = $(this),
      mapKey = $map.data('key'),
      arr = [],
      yaMapApiUrl = '//api-maps.yandex.ru/2.1/?lang=ru_RU&apikey='+mapKey,
      type = $(this).data('map');
    if(type === 'dealers') arr = coords;
    else if(type === 'foreign') arr = foreignCoords;
    $.ajax({
      url: yaMapApiUrl,
      dataType: "script",
      success:  function () {
        ymaps.ready(initHandler);
      }
    });
    function initHandler () {
      var myMap = new ymaps.Map($map[0], {
          center: [55.751574, 37.573856],
          zoom: 9,
          behaviors: ['default', 'scrollZoom'],
          controls: ['zoomControl']//'zoomControl'
        }),
        clusterer = new ymaps.Clusterer({
          clusterIcons: [
            {
              href: BASE_URL + '/assets/images/icons/map-circle.png',
              size: [40, 40],
              offset: [-20, -20]
            }],
          preset: 'islands#invertedVioletClusterIcons',
          groupByCoordinates: false,
          clusterDisableClickZoom: false,
          clusterHideIconOnBalloonOpen: true,
          geoObjectHideIconOnBalloonOpen: true
        }),
        points = arr.map(function(el) {
          return [Number(el.lat), Number(el.lon)];
        }),
        geoObjects = [];
      for(var i = 0, len = points.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(points[i],
          {}, {
            iconLayout: 'default#image',
            iconImageHref: BASE_URL + '/assets/images/icons/map-marker-empty.png',
            iconImageSize: [40, 65],
            iconImageOffset: [-5, -38]
          }
        );
      }

      clusterer.add(geoObjects);
      myMap.geoObjects.add(clusterer);

      myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange:...