JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>


<p>select2 select box:</p>
<p>
    <select  class="select2" style="width:300px" multiple>
        <option value="AL">Alabama</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
    </select>
</p>

<input type="text" id="test" style='width:300px;'>

JavaScript

$(function() {
  // turn the element to select2 select style
  $('.select2').select2({
    placeholder: "Select a state",
    maximumSelectionLength: 2,
    tokenSeparators: [',', ' ', ';'],
    allowClear: true,
  }).on('change', function(e) {
    var data = $(".select2 option:selected").map((i,e) => $(e).text()).toArray();
    $("#test").val(data.join(','));
  });

});