Angular DatePipe transform while patching values

Question

While patching the values in a reactive form, the date type isn't displaying the value since the datePipe transform isn't working for that field.

component.ts

  initX() {
    return this.fb.group({
      'date': [''],
      'nodes': this.fb.array([
        this.initY(),
        // this.initZ()
      ]),
    });
  }

for (let dayarray = 0; dayarray < plans.days.length; dayarray++) {
  const daysFormArray = this.form.get("days") as FormArray;
  daysFormArray.push(this.initX());
  this.form.patchValue({
    date: this.datePipe.transform(this.plan.days[dayarray].date, 'dd-MM-yyyy')
  });
}
this.form.patchValue(plans);

component.html

<div formArrayName="days">
    <div *ngFor="let X of form['controls'].days['controls']; let ix=index">
        <div formGroupName="{{ix}}" class="days">
            <label [attr.for]="ix">Date: </label>
             <input type="date" formControlName="date">
        </div>
    </div>
</div>

input date which I get from the server "date": "2020-10-14T00:00:00.000+00:00" expected to display "14-10-2020"