JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<select multiple class="chosen-select" id='vignesh'>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
    <option value="Option 4">Option 4</option>
    <option value="Option 5">Option 5</option>
</select>

CSS

* {
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

select {
    width: 300px;
}

.chosen-results .no-results span {
  color: #222;
  font-weight: bold;
}

JavaScript

var select, chosen;
    select = $(".chosen-select");
    select.chosen({ no_results_text: 'Press Enter to add new entry:'});
    
    console.log(select);
    
    chosen = select.data('chosen');
console.log(chosen.search_container);
    chosen.search_container.on('keyup', function(e){
        if (e.which == 13 && $(this).parent().siblings('.chosen-drop').find('li.no-results span').length > 0){
       
        var newVal = $(this).parent().siblings('.chosen-drop').find('li.no-results span').html();
            var option = $("<option>").val(newVal).text(newVal);
          console.log(this);
            select.prepend(option);
            select.find(option).prop('selected', true);
            select.trigger("chosen:updated");
        }
    });