JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw2.github.com/brianreavis/selectize.js/master/dist/js/standalone/selectize.min.js"></script>
<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.default.css">
<select name="test" id="test">
    <option value="2">Option 1</option>
    <option value="1">Option 2</option>
    <option value="3">Option 3</option>
</select>

<button id="testbutton">Click me to update the select with new options</button>
<p></p>

JavaScript

$("#test").selectize();


$("#testbutton").click(function() {
    new_options = [
        {text: "Option 1", value: 2},
        {text: "Option 2", value: 1},
        {text: "Option 3", value: 3}
    ]
    selectize = $("#test")[0].selectize
    
    selectize.clear()
    selectize.clearOptions()
    selectize.renderCache['option'] = {};
    selectize.renderCache['item'] = {};
    
    selectize.addOption(new_options)
    
    selectize.setValue(new_options[0].value);
    selectize.refreshOptions(false);
    $("p").html("Now the options are in the wrong order");
});