Time input in selector panel does not follow provided appearance

[ThisIsDemetrio]

Hi, all. My issue regards the UI and the styling of the TimepickerComponent after updating an Angular application from version 8 to version 11. Because of that, I've updated the @angular-material-components/datetime-picker to v.5.1.1 (from v.2.0.3).

In the application, we have updated the Module to make sure that every input field inside a mat-form-field has an appearance of type outline. Here's a snippet of our AppModule:

@NgModule({
  ...
  imports: [
    ...
    MatDatepickerModule,
    NgxMatDatetimePickerModule,
    NgxMatNativeDateModule,
  ],
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
  ],
  ...
})

The picker actually works just fine, but the MatInput field inside the picker that allows me to change the hour and the minute value (and the second, if included in the configuration). Here's working stackblitz that shows the problem.

This wouldn't be much of a problem, except the fact that the appearance was correctly set using @angular-material-components/datetime-picker v.2.0.3 and @angular/material7 (or v.8). Here's another workgin stacklibtz: the outline is shown correctly (the width of the input field is currently to narrow, but we fixed that in our application, I didn't find the feel the need to fix it here as well since it's not the focus of our problem).

Unfortunately I cannot update the library further (we're using an Angular application without Ivy, so v.11 is the latest I can use, therefore v5.1.1 of datetime-picker is the latest I can go).

There might be anything I'm missing or maybe that is not working anymore. If anyone can point something out, I thank you.