I am trying to disable datepicker on a reactive form, but only input is disabled. User still can click on a toggle and select date on the disabled datepicker. It use to work correctly in MDB4. How to fix it? Thanks.

HTML:

<mdb-form-control>
    <input
      formControlName="csaDueDate"
      mdbInput
      [mdbDatepicker]="dpCsaDueDate"
      type="text"
      class="form-control"
      id="icsaDueDate"

    />
    <label mdbLabel for="icsaDueDate" class="form-label">Due Date</label>

      <mdb-datepicker-toggle [mdbDatepicker]="dpCsaDueDate"></mdb-datepicker-toggle>

    <mdb-datepicker #dpCsaDueDate [inline]="true" [format]="formatDate"></mdb-datepicker>
  </mdb-form-control>

TS:

 this.scheduleForm = this.fb.group({
  csaDueDate: [],
});
get csaDueDate(): AbstractControl {
return this.scheduleForm.get('csaDueDate')!;}
 this.csaDueDate.disable();