JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://harvesthq.github.io/chosen/chosen.css">
  <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
    <option value=""></option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>

JavaScript

$(".chosen-select").chosen()
      .on('change', function(evt, params) {
        console.log("change")
      })
      .on('chosen:showing_dropdown', function(evt, params) {
        console.log("show")
      })
      .on('chosen:hiding_dropdown', function(evt, params) {
        console.log("hide")
      });