JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen-sprite.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<select multiple class="chosen-select" data-bind="chosen: options,
                                            optionsText: 'Label',
                                            optionsValue: 'Id',
                                            selectedOptions: selected"></select>

<select multiple data-bind="options: options,
                                            optionsText: 'Label',
                                            optionsValue: 'Id',
                                            selectedOptions: selected"></select>

CSS

select {
    width: 200px;
}

JavaScript

ko.bindingHandlers.chosen = {
            init: function (element) {
                ko.bindingHandlers.options.init(element);
                $(element).chosen({ disable_search_threshold: 10 });
            },
            update: function (element, valueAccessor, allBindings) {
                ko.bindingHandlers.options.update(element, valueAccessor, allBindings);
                $(element).trigger('chosen:updated');
            }
        };

function viewModel() {

    var self = this;

    self.options = ko.observableArray([{ Id: 1, Label: 'Administrator' }, { Id: 2, Label: 'Moderator' }]);
           
    self.selected = ko.observableArray([2]);
    

}

ko.applyBindings(new viewModel());