JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<input id="uppercase" type="button" value="UPPERCASE"/>
<input id="newdata" type="button" value="New data"/>
<br/>
<select></select>

CSS

select {
   width: 200px
}

JavaScript

var pills = [{id:1, text: "red"}, {id:2, text: "blue"}];

$('select').select2({
	ajax: {
    	transport: function(params, success, failure) {
        	var items = pills;
            
			if (params.data && params.data.q) {
        		items = items.filter(function(item) {
          			return new RegExp(params.data.q).test(item.text);
        		});
      		}
            
			var promise = new Promise(function(resolve, reject) {
        		resolve({
          			results: items
        		});
      		});
            
  			promise.then(success);
  			promise.catch(failure);                
        }
    },
    placeholder: 'select item'
});

$('#uppercase').click(function() {
    $.each(pills, function(idx, val) {
        pills[idx].text = val.text.toUpperCase();
        pills[idx].id += 10;
    });
});

$('#newdata').click(function() {
    pills = [
	    { id: 21, text: 'enhancement' },
        { id: 22, text: 'bug' },
        { id: 23, text: 'duplicate' },
        { id: 24, text: 'invalid' },
        { id: 25, text: 'wontfix' }
    ];
});