JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#map {
    width: 600px;
    height: 400px;
}

JavaScript

ymaps.ready(function () {
    var myMap = new ymaps.Map("map", {
        center: [53.5,45.69],
        zoom: 1
    });		
    ymaps.route(['Москва', 'Санкт-Петербург'])
    .then(function (route) {
        var start = route.getWayPoints().get(0);
        
        myMap.geoObjects.add(route);
        myMap.setCenter(start.geometry.getCoordinates(), 12, {
            checkZoomRange: true
        });
        onRoute(route);
    },
    function (error) {
        alert('Возникла ошибка: ' + error.message);
    }).fail(function (err) {
        console.log(err);
    })
    function onRoute(route) {
        // Длина маршрута
        alert(ymaps.formatter.distance(route.getLength()));
    }
});