JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
  <script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.js"></script>
</head>
<body>
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
</body>
</html>

JavaScript

var select;
  $(document).ready(function() {
    select = $('.js-example-basic-single');
    select.select2();
    select.on('select2:open', function (e) {
      setTimeout(function() {
        console.log('adding');
        select.append($('<option>', {
          value: 'OR',
          text: 'Oregon'
        }));
        select.trigger('change.select2');
        console.log('added');
      },1000);
    });
  });