JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<html>

  <body>
    <div id="wrapper">
      <select id="sel" multiple="multiple" name="users[]">
      </select>
      <br><br><br><br>
      <button type="button" id="btn">
        Click Me
      </button>
    </div>
  </body>

</html>

CSS

body {
  width: 100%;
}
#wrapper {
  width: 100%;
}

JavaScript

$(document).ready(function() {
  $('#sel').select2({
    ajax: {
      url: 'https://jsonplaceholder.typicode.com/users',
      data: function(params) {
        var query = {
          str_search: params.term
        }
        return query;
      },
      //data: null,  
      processResults: function(data, params) {
        //console.log(data);
        return {
          results: data,
          pagination: {
            more: false
          }
        };
      },
      cache: true,
      dataType: 'json',
      delay: 250
    },
    templateResult: format_list,
    templateSelection: format_selection,
    width: '80%',
    minimumInputLength: 1,
    closeOnSelect: false,
    allowClear: false,
    placeholder: "-- Search for users --"
  });

  $("select #rvwr").on("select2:unselect", function(evt) {
    if (!evt.params.originalEvent) {
      return;
    }
    evt.params.originalEvent.stopPropagation();
  });

  $('#btn').on('click', function() {
    $.ajax({
        type: 'GET',
        url: 'https://jsonplaceholder.typicode.com/users/1'
      })
      .then(function(data) {  
         // create the option and append to Select2
         $('#sel').append($('<option />')  // Create new <option> element
          .val(data.id)                   // Set value
          .text(data.name)                // Set textContent
          .prop('selected', true)
          .attr('data-name', data.name)   // Don't know why the .data(key, value) isn't working...
          .attr('data-email', data.email))
          .trigger('change');
      }); //then
  }); //click
}); //doc ready

function format_list(repo) {
  if (repo.loading) {
    return repo.text;
  }

  var $container = $(
    `<div class='select2-result-repository clearfix'>
						<div class='select2-result-repository__name'>
							<b>${repo.name}</b>
							- ${repo.email}  
						</div>
						
					</div>`
  );
  return $container;
}

function format_selection(obj) {
  return...