I am trying to capture the close event on the datepicker control using the following code:

        <div class="row mb-4">
        <div class=" col-lg-4">
            <div class="form-outline datepicker" data-mdb-datepicker-init data-mdb-disable-future="true" data-mdb-input-init data-mdb-format="mm/dd/yyyy">
              <input type="text" class="form-control" style="width:200px !important;" id="dtStartDate" placeholder="mm/dd/yyyy" />
              <label for="dtStartDate" class="form-label">Select Start Date</label>
            </div>
        </div>
        <div class="col-lg-4">&nbsp;</div>
        <div class=" col-lg-4">
            <div class="form-outline datepicker" data-mdb-datepicker-init data-mdb-disable-future="true" data-mdb-input-init data-mdb-format="mm/dd/yyyy">
              <input type="text" class="form-control" style="width:200px !important;" id="dtEndDate" placeholder="mm/dd/yyyy" />
              <label for="dtEndDate" class="form-label">Select End Date</label>
            </div>
        </div>

    </div>
</div>
<script>
    $(document).ready(function () {
        const myDatepicker = document.querySelector('#dtStartDate')
        myDatepicker.addEventListener('close.mdb.datepicker', (e) => {
            alert('Date has been changed')
        })
    });

</script>

As you can see, there are 2 datepicker controls on the page for the user to select the starting and ending dates. I am testing the close event on the first control, dtStartDate, but when I open the datepicker, pick a date and then close it, nothing happens. There are no error messages in the console, but it also doesn't fire the close event code. What did I miss?