JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css">
<select class="select">
    <option selected="selected" value=""></option>
    <option value="">All Sizes</option>
    <option value="6ad0a51e-e58c-4431-914d-b3f1a6b2c08e">18in X 18in</option>
    <option value="a00b492e-08fa-4824-ad86-9ffb8a510be2">9.75in X 39in</option>
    <option value="423b2a4e-2876-4969-84e3-3601e3fab524">19.7in X 19.7in</option>
    <option value="9d4f4f13-47f6-422c-bbaf-f0911b5c156c">12in x 36in</option>
    <option value="d417f0bc-d1fe-4d6b-bf41-aa081907254c">22in X 22in</option>
    <option value="d1dc3ca6-fc3c-47f8-8b71-80219c8fd98b">24in X 24in</option>
    <option value="c92c91a3-dfdb-4240-83e2-c08771748e47">18in x 36in</option>
    <option value="4741d76f-628f-4ca0-a871-dfe2c4986e66">19.7in X 39.4in</option>
    <option value="f70791ba-c56a-403b-b23e-fb2e8869ba07">36in X 36in</option>
    <option value="7f70b445-a890-4838-a9f5-4c3100643fdd">39in X 39in</option>
</select>

CSS

.select {
    width: 400px;
}

JavaScript

var $select = $('.select');

$select.select2({
	  allowClear: true,
    placeholder: ''
});

var $option = $select.children().eq(1);
$select.select2('data', { id: $option.val(), text: $option.text() });

console.log('$select.val(): ' + $select.val());