JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?mode=debug&lang=ru_RU"></script>
<script src="//yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;

JavaScript

ymaps.ready(init);

// Размер привязан к географическим координатам
var ICON_COORD_OFFSET = 0.2;

function init() {
  var myMap = new ymaps.Map('map', {
    center: [55, 37],
    zoom: 10
  }, {
    searchControlProvider: 'yandex#search'
  });
  // PLACEMARK из SVG
  var svg = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500" preserveAspectRatio="none" width="200" height="200"><circle cx="20" cy="20" r="0"  fill="rgb(255, 0, 0)"/></svg>';
  var MyIconLayout = ymaps.templateLayoutFactory.createClass(svg, {
    build: function() {
      MyIconLayout.superclass.build.call(this);
      this.map = this.getData().geoObject.getMap();
      this.updateIcon();
      this.setupListeners();
    },
    clear: function() {
      this.clearListeners();
      MyIconLayout.superclass.clear.call(this);
    },
    setupListeners: function() {
      this.map.events.add('boundschange', this.updateIcon, this);
    },
    clearListeners: function() {
      this.map.events.remove('boundschange', this.updateIcon, this);
    },
    getShape: function() {
      return new ymaps.shape.Circle(new ymaps.geometry.pixel.Circle(
      [0, 0],
      this.getRadius()
      )
      )
    },
    getRadius: function() {
      var projection = this.map.options.get('projection');
      var zoom = this.map.getZoom();
      var geoPoint = this.getData().geoObject.geometry.getCoordinates();
      var pixelPoint = projection.toGlobalPixels(geoPoint, zoom);
      var offsetGeoPoint = geoPoint.map(function(coord) { return coord + ICON_COORD_OFFSET; });
      var offsetPixelPoint = projection.toGlobalPixels(offsetGeoPoint, zoom);
      return Math.round(Math.abs(pixelPoint[0] - offsetPixelPoint[0]));
    },
    updateIcon: function() {
      var state = this.getData().state;
      var zoom = this.map.getZoom();
      if (state.get('currentZoom') !== zoom) {
        state.set('currentZoom', zoom);
        var r = this.getRadius();
        var circle = $(this.getParentElement)
      ...