JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <script src="https://api-maps.yandex.ru/2.1/?apikey=c4c6869e-8add-414b-b516-52b1dfccb7db&lang=ru_RU" type="text/javascript"></script>
  </head>
  <body>
    
    <div id="map" style="width: 800px; height: 600px"></div>
    
    <script>
      document.addEventListener("DOMContentLoaded", function(event) { 
        console.log('load');
        ymaps.ready(() => {
          let map = new ymaps.Map("map", {
            center: [50.34031567, 127.53951720],
            zoom: 10,
            controls: ['typeSelector', 'fullscreenControl', 'zoomControl'],
          }, {maxZoom: 14, minZoom: 7});


          let clusterer = new ymaps.Clusterer({clusterDisableClickZoom: true});
          let Line = new ymaps.GeoObject(
            {
              "geometry": {
                "type": "LineString",
                "coordinates": [
                  [50.2678453, 127.73968655]
                  [50.26775729, 127.74405988],
                  [50.26742809, 127.74576362],
                  [50.26645447, 127.7475729],
                  [50.26001311, 127.75558976],
                  [50.25693628, 127.76014689]
                ]
              },
              "properties": {
                "hintContent": "Благовещенск-Гомелевка",
                "balloonContent": "Благовещенск-Гомелевка"
              }
            },
            {
              "draggable": false,
              "strokeColor": "rgb(0, 0, 0)",
              "strokeWidth": 5
            }
          );
          clusterer.add(Line);
          map.geoObjects.add(clusterer);

        });

      });
    </script>
    
  </body>
</html>