p-tabPanel tab having an issue in rendering ngx-smart-modal when the tabs are added dynamically

Question

Currently, I'm trying to add dynamic tabs which have child component, Within the child component, there are several ngx-smart-modal models. I'm able to create dynamic tabs with a close button on it. The issue arises when there are more than one tabs.

Issue

Instance 1: I'm on the first dynamically created tab and I try to click on the model present in a custom component, Model pops up in the last tab of the dynamically created tab. (With the last component details and not desired component details)

Instance 2: If it has only a single dynamically created a model then it works perfectly fine.

Code

HTML

<p-tabPanel [header]="doc.docName" leftIcon="ui-icon-web-asset" *ngFor="let doc of docProps; let i = index" [selected]="true" (onClose)="closeDocProps(doc)" [closable]="true">
   <app-child-component [docId]="doc.docId" ></app-child-component>
 </p-tabPanel>

app-child-component has several models present in it.

app-child-component (HTML)

<ngx-smart-modal #myModal identifier="myModal">
<h1>Title</h1>
  <p>Some stuff...</p>
  <button (click)="myModal.close()">Close</button>
</ngx-smart-modal>

TS (Parent component)

on document click operation in the parent component

this.docProps.push({
  docId: document.id,
  docName : document.docTitle
});
this.changeDetectorRef.detectChanges();
this.activeIndexNumber = this.docProps.length; // to open up the last tab clicked.

also, I'm changing the tab index number with the change of the tab.

onTabChange(event) {
      this.changeDetectorRef.detectChanges();
      this.activeIndexNumber = event.index;
  }

Is there something that I'm doing wrong? Suggestions are highly welcomed.

stackblitz:

https://stackblitz.com/edit/angular-uy3kf5