JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&amp;lang=ru-RU" type="text/javascript"></script>

<div id="loading">Loading...</div>
<div id="YMapsID" style="width: 500px; height: 500px; background-color: #ddd;"></div>

JavaScript

ymaps.ready(function()
{
    var map = new ymaps.Map('YMapsID', {
        center: [55.76, 37.64],
        zoom: 10,
        type: 'yandex#map',
        behaviors: ['default', 'scrollZoom']
    }); 
    
    var circle = new ymaps.GeoObject({
        geometry: new ymaps.geometry.Circle([55.76, 37.64], 15000)
    }, {
        strokeWidth: 3,
        strokeColor: '#FF0000',
        interactivityModel: 'default#transparent',
        draggable: false
    });
    map.geoObjects.add(circle);     
    
    circle.events.add('mousedown', function(e)
    {
        circle.options.set({
            'interactivityModel': 'default#geoObject',
            'draggable': true
        });
    });
    
});