Angular mat-datepicker changing min/max date when I change FormGroup

Question

I have a FormArray which contains multiple FormGroup, that have startDate and endDate, which can not overlap.

I'm changing the FormGroup using a BehaviourSubject, in which I pass the current min and max date.

When I submit, the previous form gets invalid because the min/max date on the mat-datepicker get the same value as the current form..

Any help on how to fix this?

Here's my code:

season.service.ts
currentSeason: BehaviorSubject<{ season: FormGroup, startDate: string, endDate: string }>;


changeSeason(index: number): void {
        this.currentIndex = index;
        this.currentSeason.next({
            season: this.seasonForm.at(index) as FormGroup,
            startDate: this.getMinDate(index),
            endDate: this.getMaxDate(index)
        })
    }


initSeason() {
        this.currentSeason = new BehaviorSubject<{ season: FormGroup, startDate: string, endDate: string, index: number }>(null);
        this.currentTitle = new BehaviorSubject<{ title: string; index: number }>(null);
        this.seasonForm = new FormArray([]);
        for (let i = 0; i < this.seasons.length; i++) {
            const previousControls = i !== 0 ? this.seasonForm.at(i - 1)?.value || {} : this.seasonForm.at(i)?.value || {};
            const commonControls = {
                name: new FormControl(previousControls.name, Validators.required),
                startDate: new FormControl(previousControls.startDate, Validators.required),
                endDate: new FormControl(previousControls.endDate, Validators.required),
            };
            const seasonGroup = new FormGroup(commonControls, {
                validators: [
                    compareDates('startDate', 'endDate'),
                    compareDates('extraStartDate', 'extraEndDate')
                ]
            });
            this.seasonForm.push(seasonGroup);
        }
        this.changeSeason(0);
    }

component.ts

 ngOnInit(): void {
        this.seasonService.currentSeason.subscribe(({season, startDate, endDate}) => {
            this.seasonForm: FormGroup = season;
            this.maxDate = endDate ? new Date(endDate) : null;
            this.minDate = startDate ? new Date(startDate) : null;
        });
    }

component.html
<div>
                                        <input [readonly]="true"
                                               [min]="minDate"
                                               [max]="maxDate"
                                               (click)="startDate.open()"
                                               matInput
                                               [matDatepicker]="startDate"
                                               [formControl]="startDateControl"
                                               class="cursor-pointer">
                                        <mat-datepicker #startDate></mat-datepicker>
                                    </div>


and on the parent component:

subscribeToCurrentSeason(): void {
        this.seasonService.initSeason();
        this.seasonService.currentSeason.pipe(takeUntil(this.seasonService.unsubscribe$)).subscribe(({season, startDate, endDate}) => {
            this.seasonService.initSeason();
        });
    }

Browser console:

When I click on #2:

I've reseted the values, added a .takeUntil(this.unsubscribe$), nothing worked.