Blazor Web Assembly Application - input field binding is not working after calling JavaScript document ready from blazor component

Question

I am using the AdminLTE template in my Blazor wasm application. The template is working fine but I am having an issue with input fields binding. I have a data filtering form and the application should apply the selected filter values to fetch the new data. I have to change the "on document ready" function to the below code in the index.html file to make the jquery plugin working.

<script>
    function onBlazorReady() {
        //Initialize Select2 Elements
        $('.select2').select2();
        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        }); 

        //Date range picker
        $('#reservation').daterangepicker();
    }
</script>

In my razor component, I am calling the above-mentioned function as shown below:

private string DepartmentIdList { get; set; }
private string EmployeeId { get; set; }
private string Daterange { get; set; }


protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        JS.InvokeVoidAsync("onBlazorReady");
    }
}

I have bind the HTML tags in my razor component with C# variables:

<div class="col-md-3">
                        <div class="form-group">
                            <label>Employee</label>
                            <select id="ddEmployee" class="form-control select2bs4" style="width: 100%;" @bind="EmployeeId">
                                <option value="-1" selected="selected">All</option>
                                <option value="1">Aqeel</option>
                                <option value="2">Ehsan</option>
                                <option value="3">Shajar</option>
                                <option value="4">Salman</option>
                                <option value="5">Noman</option>
                            </select>
                        </div>

If I don't call the "onBlazorReady" function then data binding is working but the plugins are not reflecting as expected. I am using different controls such as date range control with the calendar and multiple selections for choosing departments. So I need to call "onBlazorReady" function. But when I invoke this function then data binding stops working.

When the user clicks on the "Apply" button, I want to get the selected values and load data based on applied filters.

I have searched on google about this issue and found some suggestions that I have to invoke the change event. But I have used that example code in my project the calendar control is not displaying the calendar and also it only works for one select field but I have two select fields.

I have tried this code in both the Blazor Web Assembly project as well as the Blazor Server-Side project but it didn't work in any project. It seems like I am making the same mistake in both projects.

Anyone have faced the same issue with your implementations? if so, how you resolved this issue? I would be grateful if anyone could help me to fix this issue.