JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<select id="ddlInqOn" class="InqSelect2 form-control" style="width:600px;height:500px; display:block">
                    <option value="1">--All--</option>
                    <option value="2">Today Date</option>
                    <option value="3">Past Date</option>
                    <option value="4">Feature Date</option>
   </select>

JavaScript

$('.InqSelect2').select2({
    dropdownAutoWidth: true,
    multiple: true
});


$('.InqSelect2').on('select2:select', function (e) {
    
    if (e.params.data.id == 1){
        $(this).val(1).trigger('change');
    }else{
        values = $(this).val();
        var index = values.indexOf('1');
        
        if (index > -1) {
            values.splice(index, 1);
            $(this).val(values).trigger('change');
        }
    }
});