Issue while adding a new item in a Carousel animation

I have a carousel animation with some items. I get the response in real time and so items can get added anytime.

For demonstration I am using setTimeout function in order to add a new item into the carousel. I am pushing the item and also updating the order of items.

The item gets added but not in the expected position. It remains on the top left and when cards change their places, then it takes its position.

I want the new item to take its position as soon as it is added.

enter image description here

Code:

.ts:

  @ViewChildren('card') items: QueryList<ElementRef>;
  @ViewChild('container') container: ElementRef;
  @ViewChild('dataInit') dataInit: ElementRef;

  rect: any;     
  private player: AnimationPlayer;
  timing = '2000ms ease-in-out';
  selectedIndex = 0;
  rectElement: any;
  order: number[] = this.data.map((_x, i) => this.data.length - i);
  
  constructor(private builder: AnimationBuilder) {} 

  ngAfterViewInit() {
    this.calculateDimensions();
    this.animateCarousel();
    this.getRealTimeData();  // Here adding an item after 3 seconds. Cards change their places every 5 seconds
  }

  calculateDimensions() {
    this.rectElement = this.items.first.nativeElement.getBoundingClientRect();
    const rect = this.dataInit.nativeElement.getBoundingClientRect();
    const rectContainer = this.container.nativeElement.getBoundingClientRect();

    this.rect = {};
    this.rect.height = rectContainer.height - rect.y;
    this.rect.y = rect.y;
    this.rect.width = rectContainer.width - this.rectElement.width;
  }

  animateCarousel() {
    this.items.forEach((item: ElementRef, index: number) => {
      this.order[index] =
        this.items.length - ((index + this.selectedIndex) % this.items.length);
      const itemStyle =
        this.items.length > 5 ? this.getStyle2(index) : this.getStyle(index);
      const myAnimation = this.builder.build([
        animate(this.timing, style(itemStyle))
      ]);
      this.player = myAnimation.create(item.nativeElement);
      if (index == 0)
        this.player.onDone(() => {
          this.executeAction();
        });
      this.player.play();
    });
  }

  executeAction() {
    console.log(this.data[this.selectedIndex]);
    timer(5000).subscribe(res => {
      this.calculateDimensions();
      this.selectedIndex =
        (this.selectedIndex + this.items.length - 1) % this.items.length;
      this.animateCarousel();
    });
  }

  getRealTimeData(): void {
    setTimeout(() => {
      this.data.push(this.testObject);
      this.order = this.data.map((_x, i) => this.data.length - i);
    }, 3000);
  }

.html:

<div #container class="container">

    <div class="header">
        A Simple Carousel
    </div>
    <div #dataInit class="data"></div>
    <div #card class="cards" [ngStyle]="{'z-index':order[i]}" [style.visibility]="order[i]>=2 && order[i]<=data.length-5?'collapse':null" *ngFor="let item of data; let i = index;">
            <div class="name">{{ item.name }}</div>
            <div class="age">{{ item.age }}</div>
    </div>
</div>

Stackblitz link