Form Array data replace when type 2nd row input fields in Angular

Output Image

I need to get the form data from this dynamic form. see my output image here I select 2 designation and 3 shifts from the multiselect. after I hit the save button the form was generated successfully. the problem is I'm only getting one array form data in my code.

Here is my working stackblitz link https://stackblitz.com/edit/angular-qmiv4o?file=src/app/app.component.ts

**Expected output **

{
    "patterns": [
        [
            {
                "sun": "1",
                "mon": "1",
                "tue": "1",
                "wed": "1",
                "thu": "1",
                "fri": "1",
                "sat": "1"
            },
            {
                "sun": "2",
                "mon": "2",
                "tue": "2",
                "wed": "2",
                "thu": "2",
                "fri": "2",
                "sat": "2"
            },
            {
                "sun": "3",
                "mon": "3",
                "tue": "3",
                "wed": "3",
                "thu": "3",
                "fri": "3",
                "sat": "3"
            }
        ],
        [
            {
                "sun": "4",
                "mon": "4",
                "tue": "4",
                "wed": "4",
                "thu": "4",
                "fri": "4",
                "sat": "4"
            },
            {
                "sun": "5",
                "mon": "5",
                "tue": "5",
                "wed": "5",
                "thu": "5",
                "fri": "5",
                "sat": "5"
            },
            {
                "sun": "6",
                "mon": "6",
                "tue": "6",
                "wed": "6",
                "thu": "6",
                "fri": "6",
                "sat": "6"
            }
        ]
    ]
}