JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Примеры. Размещение карты на странице.</title>
    <!--
        Подключаем API карт
        Параметры:
          - load=package.full - основные компоненты;
	      - lang=ru-RU - язык русский.
	    Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)
    -->
    <script src="//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
</head>

<body>
    <div id="map" style="width:500px; height:400px"></div>
</body>

</html>

JavaScript

ymaps.ready(function () {
    var map = new ymaps.Map('map', {
        center: [59.22, 39.89],
        zoom: 12,
        behaviors: ['default', 'scrollZoom']
    });
    // Создаем экземпляр класса ymaps.control.SearchControl
    var mySearchControl = new ymaps.control.SearchControl({
        resultsPerPage: 5,
        width: 300,
        noPlacemark: true
    });
    
    var mySearchResults = new ymaps.GeoObjectCollection(null, {
        hintContentLayout: ymaps.templateLayoutFactory.createClass('$[properties.name]')
    });
    
    map.geoObjects.add(mySearchResults);
    
    mySearchResults.events.add('click', function (e) {
        e.get('target').options.set('preset', 'twirl#redIcon');
    });
    
    map.controls.add(mySearchControl, {
        left: 50,
        top: 5
    }).add("zoomControl", {
        top: 5
    }).add("typeSelector");
    
    mySearchControl.events.add('resultselect', function (e) {
        var index = e.get('resultIndex');
        mySearchControl.getResult(index).then(function (res) {
            mySearchResults.add(res);
        });
    }).add('submit', function () {
        mySearchResults.removeAll();
    })
});