Angular material components - datetimepicker - midnight 12h/24h issue

Question

I have implemented angular material datetime picker and I have strange issue.

It shows 24:00:00 as midnight time

On time picking it has same issue, it back to 12 even if I am changing it to 00

HTML

<div fxLayout="row" fxLayoutAlign="start start" [formGroup]="filtersFormGroup">
  <input class="configuration-input" [ngxMatDatetimePicker]="picker" (focus)="initDatesRange()" placeholder="Choose a date" [formControlName]="dateControl" style="width: 100%"
         [min]="minDate" [max]="maxDate" [disabled]="disabled">
  <mat-datepicker-toggle matSuffix [for]="picker" (click)="initDatesRange()"></mat-datepicker-toggle>
  <ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
                           [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
                           [touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian"
                           [disableMinute]="disableMinute" [hideTime]="hideTime">
  </ngx-mat-datetime-picker>
</div>

TS

import {Component, Input, OnInit, Output} from '@angular/core';
import {ThemePalette} from '@angular/material/core';
import {FormGroup} from '@angular/forms';

@Component({
  selector: 'app-form-datetimepicker',
  templateUrl: './form-datetimepicker.component.html',
  styleUrls: ['./form-datetimepicker.component.scss']
})
export class FormDatetimepickerComponent implements OnInit {
  @Input() dateControl: string;
  @Input() filtersFormGroup: FormGroup;

  minDate:Date;
  maxDate:Date;
  disabled: false;
  showSpinners= false;
  showSeconds= false;
  stepSecond= 1;
  stepMinute=1;
  stepHour= 1;
  touchUi= false;
  color: ThemePalette;
  enableMeridian= true;
  hideTime= false;
  disableMinute= false;


  constructor() {
  }

  ngOnInit(): void {
  }

  initDatesRange() {
    this.minDate = new Date();
    this.maxDate =  new Date();
    this.maxDate.setMinutes(new Date().getMinutes()+1);

  }
}