JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<select>
    data-bind="source: ClientInfo.Location.States, value: ClientInfo.Location.SelectedState, events: {change: checkNewValue}" 
    data-text-field="Value" 
    data-value-field="Key" 
    id="cboStates" 
    name="location_states" 
    data-role="combobox">
</select>

JavaScript

var viewModel = kendo.observable({
    ClientInfo: {
        Location: {
            States: [
                {Key: 1, Value: "Item 1"}, 
                {Key: 2, Value: "Item 2"}
            ],
            SelectedState: {Key: 1, Value: "Item 1"}
        }
    },
    checkNewValue: function (e) {
        var comboBox = e.sender;
        if (comboBox.select() < 0) {     
            var text = $.trim(comboBox.text());
            
            var states = this.get("ClientInfo.Location.States");
            
            var newKey = states.length + 1;
            
            states.push(
                {Key: newKey, Value: text}
            );
            
            this.set("ClientInfo.Location.SelectedState", states[states.length - 1]);
        }
    }
});
    
kendo.bind($('#cboStates'), viewModel);