Angular MAT_DATE_FORMATS change values at runtime (FIXED)

Question

So in my Module when I do the import of the Material date picker, i provide MAT_DATE_FORMATS

{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }

But the value to be provided is dependant on the user since the date format is a user setting. This implies that I need to be able to change the value of MAT_DATE_FORMATS at runtime. I already tried this answer. In which in my user service listen to events

Class SomeUserService {
  constructor(@Inject(MAT_DATE_FORMATS) formats: MatDateFormats) {
      this.userSessionSubject.subscribe((s) => {
          formats.parse.dateInput = session.dateFormat;
          formats.display.dateInput = session.dateFormat;
     });
  }
}

So I thought that this would simply update the formats globally throught the app wherever I use a <mat-datepicker>. But this does not work. In my test case, the setted dateInput would be the string 'dd/MM/YYYY' or 'DD/MM/YYYY'; Yet a datepicker will still display the US notation in the input field.

This is how the DatePicker with input field is displayed

<mat-form-field class="w-100 no-border-mat-input">
  <input matInput [matDatepicker]="datePicker" placeholder="placeholder" formControlName="date" required="getRequired('date')" name="date">
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>

EDIT 1

I also tried this answer as suggested in the comments and although my formatting is called, it is not applied in the datepicker nor the input field.

And in the screenshot below I list my providers (only one present which is to call the formatting)

EDIT 2

Fixed: I needed to import the MatMomentDateModule and it made everything work.