JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>

<table id="example" class="table table-bordered table-hover nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
       ...

JavaScript

$(document).ready(function() {

var table = $('#example').DataTable( {

initComplete: function () { 
// loop through each colum in my datatable          
this.api().columns().every( function () {

var column = this;
//append bootstrap selectpicker (multiple) on footer of current colum 
var select = $('<select class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple></select>')
.appendTo( $(column.footer()).empty() );

// i created global variable and added an event when the dropdown select opens then store the initial selected values
var initVal;
select.on('show.bs.select', function () {
initVal = $(this).val().toString(); });

//i added event when you close the dropdown select it will check the current selected options. if it will the same as initial values then do nothing. if the values are diffrent then search current options and draw the table. if nothing selected then reset datatable 
select.on("hide.bs.select", function() {
var val = $(this).val().toString();
if ( (val.length > 0) && (initVal !== val) )  {
column.search( val, true, false ).draw(); }
else if ( (val.length == 0) && (initVal !== val) ) { 
column.search('').draw(); }
});
//check unique value in current column and add as options in the select
column.data().unique().sort().each( function ( d, j ) {
if (d === '') { d='(Blank)'; }
select.append( '<option class="optionSize" value="'+d+'">'+d+'</option>' ); });
 });
 
//apply bootstrap selectpicker
$("select").selectpicker();
// adjust column width
//table.columns.adjust();

        }
} );

// on table draw
table.on('draw', function () {
//loop through each column by index
table.columns().indexes().each( function ( idx ) {
//find the select in the current column
var select = $(table.column( idx ).footer()).find('select');
//check if select is defined and doesn't have any option selected then we can update the options...