TypeScript: add a new object into an array of objects

I have the following data structure:

uiBundles:
[
    {
        "id": "tasks widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "tasks-widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "berater widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "berater-widget",
                "roles": "MB"
            }
        ]
    }
]

What I would like to do is add a new uiUnit into this embedded array of objects. Here is my code:

add-new.component.ts:

uiBundles: UIBUndle[];

ngOnInit(): void {
    this.getBundlesService.getUiBundles().subscribe((value: UIBundle[]) => this.uiBundles = value);
}

addWidget(id: string): void {
    this.selectedUiUnits = this.uiBundles.filter((data) => data.id === id);
    let newWidget = { id: 'new', uiUnits: [{ id: 'new-widget', type: 'widget', roles:'MB' }] };
}

add-new.component.html:

<div *ngFor="let bundle of uiBundles">
  <button (click)="addWidget(bundle.id)"></button>
</div>

When I run this code, the result is this:

[
    {
        "id": "tasks widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "tasks-widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "berater widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "berater-widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "new",
        "uiUnits": [
            {
                "type": "widget",
                "id": "new-widget",
                "roles": "MB"
            }
        ]
    }
]

But what I am trying to do would be:

[
    {
        "id": "tasks widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "tasks-widget",
                "roles": "MB"
            },
            {
                "type": "widget",
                "id": "new widget",
                "roles": "MB"
            }
        ]
    },
    {
        "id": "berater widget UI",
        "uiUnits": [
            {
                "type": "widget",
                "id": "berater-widget",
                "roles": "MB"
            }
        ]
    }
]

Can someone please help me, what did I do wrong here?

>Solution :

Try this:

addWidget(id: string): void {
    const index: number = this.uiBundles.findIndex((data) => data.id === id);
    const newUnits = [{ id: 'new-widget', type: 'widget', roles:'MB' }];

    this.uiBundles[index].uiUnits.push(newUnits);
}