JSFiddle - React, Tailwind, and code Playground

HTML

Тут работает:</br>
<span class="span">region</span>
<input namekladr="region" value="" />
</br>
<span class="span">Город</span>
<input namekladr="city" value="" width="2000"/>
</br>
<span class="span">Улица</span>
<input namekladr="street" type="text" />
</br>
<span class="span">Дом</span>
<input namekladr="building" type="text" />
</br>
</br>
Тут нужно сделать, чтобы улица и дом автозаполнялись:</br>
<span class="span">Город</span>
<input namekladr="city" value="Москва" />
<span class="span">Улица</span>
<input namekladr="street" type="text" />
<span class="span">Дом</span>
<input namekladr="building" type="text" />
А если value input-а города пустое, то тогда 1-й вариант

CSS

.kladr_autocomplete_undefined{
    width: 1660px;
	top: 776.078125px;
	left: 1740px;
	border: 1px solid #aaaaaa;
	background: #25283e;
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	font-weight: 200;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-family: Verdana,Arial,sans-serif;
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: none;
	position: absolute;
	cursor: default;
	z-index: 200;
}

JavaScript

//Подключение функций плагина

(function($){
    $(function() {
        var token = '51dfe5d42fb2b43e3300006e';
        var key = '86a2c2a06f1b2451a87d05512cc2c3edfdf41969'; 
        var region = $( '[namekladr="region"]' );
        var city = $( '[namekladr="city"]' );
        var street = $( '[namekladr="street"]' );
        var building = $( '[namekladr="building"]' );
        var buildingAdd = $( '[namekladr="building-add"]' );
        // Формирует подписи в autocomplete
        var LabelFormat = function( obj, query ){
            var label = '';
            
            var name = obj.name.toLowerCase();
            query = query.toLowerCase();
            
            var start = name.indexOf(query);
            start = start > 0 ? start : 0;

            if(obj.typeShort){
                label += '<span>' + obj.typeShort + '. ' + '</span>';
            }

            if(query.length < obj.name.length){
                label += '<span>' + obj.name.substr(0, start) + '</span>';
                label += '<span>' + obj.name.substr(start, query.length) + '</span>';
                label += '<span>' + obj.name.substr(start+query.length, obj.name.length-query.length-start) + '</span>';
            } else {
                label += '<span>' + obj.name + '</span>';
            }

            if(obj.parents){
                for(var k = obj.parents.length-1; k>-1; k--){
                    var parent = obj.parents[k];
                    if(parent.name){
                        if(label) label += '<span>, </span>';
                        label += '<span>' + parent.name + ' ' + parent.typeShort + '.</span>';
                    }
                }
            }

            return label;
        };
        
                // Подключение плагина для поля ввода region
        region.kladr({
            token: token,
            key: key,
            type: $.kladr.type.region,
            withParents: true,
            labelFormat: LabelFormat,
            verify:...