12h mode doesnt work with reactive forms when initialized

[Kroko06]

This is also happening in the demo app on stackblitz, in the latest example.

Demo:
TS:
// in constructor
const d = new Date();
d.setDate(1);
d.setMonth(2);
d.setHours(14);
d.setMinutes(0);
d.setSeconds(1);
d.setMilliseconds(10);
this.defaultValue = d;

this.form = this.formBuilder.group({
  time: [this.defaultValue, Validators.required]
});

HTML:

Time

Reactive Form Value: {{form.value | json}}

{{form.get('time').errors | json}} Change Max Value

Expect:
When setting default value through form control, expected input to be in "hh:mm am/pm" format (2:00 pm).

Actuall:
Input is defaulted to 24h hh:mm format (14:00) even when 12h mode is set

Reason:
when selecting 12h mode the 24h mode is still selected when rendering default input value in
@input() set value(value: Date){...}