Bootstrap Datepicker autoclose not working. Issue with 'form-floating'?

I am using bootstrap datepicker in my ASP.NET web application as follows:

HTML

           <div class="row mb-2">
                        <div class="col-sm-4 form-floating">
                            <div class="input-group date" data-provide="datepicker" name="dp" id="dp">
                            <input type="text" class="form-control" id="Last_Reviewed_On" readonly name="Last_Reviewed_On">
                            <label for="Last_Reviewed_On">Last Reviewed On</label>
                                </div>
                        </div>
</div>

jQuery Initialization

            $('#dp').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: "mm/dd/yyyy",
                startDate: new Date()
            });

For some reason, the datepicker calendar still shows automatically (despite the autoclose directive in the initializer) when the form is displayed, as seen here:

I noticed that the label for the form element is not displayed properly.

I don't know how to resolve this. I wondered if form-floating on the wrapper <div> would be interfering, and even after removing that, the output is still wrong.
Can anyone help me figure this out please?