JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;amp;load=package.standard"></script>
<div id="map"></div>

CSS

#map {
    width:100%;
    height: 400px;
}

JavaScript

var route_points = [];
function init() {
    map = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 10,
    }, {
        minZoom: 7,
    });

    from = 'Тверь, Россия';
    to = 'Клин, Московская область, Россия';
    ymaps.route([from, to], {
        mapStateAutoApply: true
    }).then(function (route) {
        
    z=0;
        count_path = route.getPaths().getLength();
        for (i = 0; i < count_path; i++) {
            path = route.getPaths().get(i);
            segments = path.getSegments();
            for (j = 0; j < segments.length; j++) {
                coords = segments[j].getCoordinates();
                for (k = 0; k < coords.length; k++) {
                    point = coords[k];
                    route_points[z] = point;
                    z = z + 1;
                }
            }
        }
        polyline = new ymaps.Polyline(route_points);
        polyline.options.setParent(map.options);
        polyline.geometry.setMap(map);
        closest = polyline.geometry.getClosest([56.744360, 37.232850]);
        console.log(closest.position);
        map.geoObjects.add(new ymaps.Placemark(closest.position));
        map.geoObjects.add(route);

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


}
ymaps.ready(init);