JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id='map' class='karta'>1</div>

CSS

.karta {
    width:100%;
    height:500px;
}

JavaScript

function init ()
  	{
		var myMap = new ymaps.Map(
		'map',
  		{
			center: [51.6423,38.5824],
			zoom: 12,
			controls: ['zoomControl','fullscreenControl','geolocationControl','rulerControl','typeSelector']
    	});
		var referencePoints1 = [[55.806133,52.142750],[56.759356,53.067414],[56.901872,52.980507],[57.528975,53.093689],[58.101412,55.750008],[58.041685,56.037687]],viaIndexes = [1,2,3,4];
		var multiRoute1 = new ymaps.multiRouter.MultiRoute
		(
		{
			referencePoints: referencePoints1,
			params: {viaIndexes: viaIndexes, results: 1}
		},
  		{
			wayPointStartIconColor: '#000000',
			wayPointFinishIconColor: '#000000',
            
			wayPointStartIconLayout: 'default#image',
			wayPointFinishIconLayout: 'default#image',
			wayPointStartIconImageHref: '/wp-map/images/1px.png',
			wayPointFinishIconImageHref: '/wp-map/images/1px.png',
			wayPointStartIconImageSize: [1, 1],
			wayPointFinishIconImageSize: [0, 0],
	
			viaPointIconRadius: 2,
			viaPointIconFillColor: '#000000',
			viaPointActiveIconFillColor: '#000000',
			routeStrokeWidth: 2,
			routeStrokeColor: '#777777',
			routeActiveStrokeWidth: 2,
			routeActiveStrokeColor: '#000000',
            
            boundsAutoApply: true
  		}
    	);
		myMap.geoObjects.add(multiRoute1);
	}
ymaps.ready(init);