Material datepicker not closing after selecting date

I'm having an issue with the material datepicker. For some reason, on my component to create an object it works perfectly. But using similar code for the object edit component and when I try to open the datepicker to pick a date, it opens and when clicking on a date it does not close, there is in fact no way to close other than to reload the site. When trying to move months, you see the second month's dates below the first one, going outside of the calendar. this is the code for both components on the datepicker

<mat-label>Start Date</mat-label>
<input
matInput
[matDatepicker]="datePicker"
id="startDate"
formControlName="startDate"
/>
<mat-datepicker-toggle
matSuffix
[for]="datePicker"
></mat-datepicker-toggle>
<mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>


and see the image of how it looks. If anyone has some insights or has seen this, would appreciate some help!

P.D The edit component is using a form to patch values, so the date is pre populated with the selected date on the beginning. I also tried using a separate variable to see if that was the cause but no it still shows up the same



Continue reading...