JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&amp;lang=ru-RU"></script>
<div id="map" style="width: 400px; height: 400px"></div>

JavaScript

ymaps.ready(init);
function init () {
    var myMap = new ymaps.Map("map", {
        center: [56.326944, 44.0075],
        zoom: 6
    });
   
    
    var circle = 
        new ymaps.Circle([[56.326944, 44.0075], 100000], {}, {
            draggable: true,
	        fillColor:    '#0066ff',
	        strokeColor:  '#ff0000',
	        strokeWidth:  3
        });

    myMap.geoObjects.add(circle);
    
    circle.geometry.events.add('pixelgeometrychange', render, circle);
    
    
    vertex = $("<div/>").css({
        position   : 'absolute',
        width      : 10,
        height     : 10,
        marginLeft : -6,
        marginTop  : -6,
        border     : '1px solid black',
        cursor     : 'pointer',
        backgroundColor: 'white'
    });
    vertex.appendTo($(myMap.panes.get('overlays').getElement()));
    render.call(circle);
    animate();
}

center = [0, 0];
function render()
{
    var pixelGeometry = this.geometry.getPixelGeometry();
    var global  = pixelGeometry.getCoordinates();
    center = this.geometry.getMap()
    .panes.get('overlays').toClientPixels(global);
}

function paint()
{
    vertex.css({
        left: center[0] + 'px',
        top : center[1] + 'px'
    });
}

function animate()
{
    requestAnimationFrame( animate );
    paint();
}