Selected GridsterItem not display when removing/hide/filtered all other element from GridsterItem array

Question

Thanks in an advance!

Issue : Always display 0 index element panel layout, even user maximized 1 or 2 or 3 index element.

Functionality: only maximize selected panel layout(from below image 1), rest of the layout will be deleted/removed/filtered.

Fill the array objects:

this.panelsLayout = this.panels?.map(p => p.layout) as Array<GridsterItem>;
this.originalPanelsLayout = this.panelsLayout.map(x => ({ ...x }));

Display layout element from panelsLayout: Array<GridsterItem>,

UI code.

<gridster [options]="options" class="gridster-container">
        <gridster-item
            [item]="panelLayout"
            *ngFor="let panelLayout of panelsLayout; let index = index"
            class="gridster-item">
            <div class="grid-item-header">
                <div class="d-flex align-items-center justify-content-between">                        
                    <div class="mr-3">
                        <i class="fas fa-expand-alt expand-alt-icon cursor-pointer"
                           adaptTooltip="Maximize"
                           placement="right"
                           *ngIf="!isMaximized"
                           (click)="maximizePanelLayout(index, panelLayout)"></i>
                        <i class="fas fa-compress-alt compress-alt-icon cursor-pointer"
                           placement="right"
                           *ngIf="isMaximized"
                           (click)="minimizePanelLayout(index)"></i>
                    </div>
                </div>
            </div>
            <dash-dashboard-panel
                class="w-100 h-100 d-inline-block"
                [dashboardPanelsInner]="panels[index]"
                [panelData]="panelsDataSelectors$[index] | async">
            </dash-dashboard-panel>
        </gridster-item>
    </gridster>

So in this UI, I defined couple of methods, which is select the panel layout for maximize/minimize the view, and rest of the panel layout will be deleted/removed/filtered. And after that user can minimize(from image 2) so all panel layout display with original position (image 1).

Below image 1 for All panel layout.

So here you can see top right icon for (Maximize panel) If user click on that that panel will maximize and other panels are hide/removed.

For maximize function code:

maximizePanelLayout(index: number, item) {    
this.options = {...this.options, gridType : GridType.Fit };
            this.cdr.detectChanges();
            this.panelsLayout = this.panelsLayout.filter(obj => obj == item);
            setTimeout(() => {
                this.panelsLayout = [{ ...this.panelsLayout, rows:10, cols:10, x: 0, y:0}];   
                this.cdr.detectChanges();
            })
}

For minimize function code:

this.isMaximized = !this.isMaximized;
    this.options = {...this.options, gridType : GridType.VerticalFixed };
    this.cdr.detectChanges();
    this.panelsLayout = this.originalPanelsLayout;

After click on maximize icon (image 2):

So here always 0 index element display, but it should displayed based on selected maximize panel.