JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//api-maps.yandex.ru/2.0/?load=package.standard,package.route&lang=ru-RU" type="text/javascript"></script>

<div id="mapplaces"></div>

CSS

#mapplaces {width: 100%; height: 500px;}

JavaScript

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("mapplaces", {
            center: [43.8333, 39.5089],
            zoom: 10
        });
        myMap.setCenter([43.8333, 39.5089]);
        myMap.container.fitToViewport();
        myMap.controls.add('zoomControl').add('typeSelector').add('mapTools');

    ymaps.route([
        [43.915383,39.329384],
        [43.8333,39.5089],
        [43.8753,39.3996],
        [43.6984,39.6383],
        [43.7924,39.4621],
        [43.9060,39.3396],
        [43.8848,39.3726]
    ]).then(function (route) {
        myMap.geoObjects.add(route);
        var points = route.getWayPoints(),
            lastPoint = points.getLength() - 1;

        points.options.set('preset', 'twirl#blueStretchyIcon');
        points.get(0).options.set('preset', 'twirl#redStretchyIcon');
        points.get(0).properties.set('iconContent', 'Лазаревское');

    }, function (error) {
        alert('Возникла ошибка: ' + error.message);
    });
}