Preselect date is not working in ngx-daterangepicker-material

Question

I am using ngx-daterangepicker-material in Angular as a date range picker. I am getting the start date and end date from the backend side and want to display and apply that dates on daterangepicker. I have tried as they mentioned in GitHub and google but it's not working there. What should I change to achieve my result?

<input type="text" ngxDaterangepickerMd [locale]="{applyLabel: 'Ok', format: 'MM-DD-YYYY'}"
 startKey="start" endKey="end" [(ngModel)]="selectedRange" name="daterange" [ranges]="ranges" 
[showCustomRangeLabel]="true" [alwaysShowCalendars]="true" (rangeClicked)="rangeClicked($event)" 
(datesUpdated)="datesUpdated($event)" class="form-control" placeholder="Select please..." 
[keepCalendarOpeningWithRange]="true" [linkedCalendars]="true"/>

in ts file I have mentioned model as below:

selectedRange: {startDate: dayjs.Dayjs, endDate: dayjs.Dayjs};

var result = [dayjs().subtract(6, 'days'), dayjs()]
 this.selectedRange = {
   startDate: result.startDate,
   endDate: result.endDate
};

result.startDate showing result like = "2021-06-10T06:11:20.833Z"
result.endDate showing result like = "2021-06-16T06:11:20.834Z"

however it's showing default today's date on UI side. So how to display correct range on UI side and apply proper date in daterangepicker?