I am able to resolve the issue. When using Angular Material components like mat-datepicker or mat-date-range-picker, the values may appear in the DOM even if the reactive form values are not persisted after duplicating a tab. This happens because these components often bind their values directly to the DOM input element as part of their internal behavior, which can interact with browser features like autofill or caching. Angular Material components like mat-date-range-picker use MatInput to synchronize the value with the underlying DOM element. When you duplicate a tab:

1. If the browser preserves the DOM state (e.g., due to caching or autofill), the input's value will persist.
2. This is separate from the state of Angular's reactive form.

So I just added autocomplete=off in my html as

<input matStartDate formControlName="start" autocomplete="off" placeholder="Start date" id="startDate" #startDateInput>