JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<select id="state" name="state" class="form-control" data-placeholder="Select...">
   <optgroup label="State">
      <option></option>
   </optgroup>
   </select>

CSS

select{
    width: 300px;
}

JavaScript

$("#state").select2();

var data =  [{ id: 'ALB', text: 'ALABAMA' }, { id: 'ALS', text: 'ALASKA' }, { id: 'ARI', text: 'ARIZONA' }];

$("#state").select2({
    data : data
});

$("#state option").remove();

data =  [{ id: 'FLO', text: 'FLORIDA' }];

$("#state").select2({
    data : data
});