Not able to update ngu-carousel data in angular

Question

This is My Component

import { Component, OnInit } from '@angular/core';
import { NguCarouselConfig } from "@ngu/carousel";

import { ContestService } from 'src/app/core/services/contest.service';

@Component({
  selector: 'app-contests',
  templateUrl: './contests.component.html',
  styleUrls: ['./contests.component.scss']
})
export class ContestsComponent implements OnInit {
  
  constructor(private contestService: ContestService) {
  }
  
  public carouselTileItems: Array<any> = [];
  public carouselTiles = {
    0: [],
    1: [],
    2: [],
    3: [],
    4: [],
    5: []
  };
  public carouselTile: NguCarouselConfig = {
    grid: { xs: 1, sm: 2, md:3, lg: 4, all: 0 },
    slide: 4,
    speed: 250,
    point: {
      visible: true
    },
    load: 2,
    velocity: 0,
    touch: true,
    easing: "cubic-bezier(0, 0, 0.2, 1)"
  };
  
  ngOnInit(): void {
    
    this.updateContestData(0,0);
  }

  public updateContestData(genre_id, category_id) {
    
    this.carouselTileItems = [];
    this.contestService.getOpenContests(genre_id, category_id)
    .subscribe(res => {
      
      if(res['success']) {
        
        res['result'].forEach(contestList => {
          
          this.carouselTileItems.push({
            contestId: btoa(contestList['contest_id']),
            coverImage: contestList['cover_image'],
            contestTitle: contestList['contest_title'],
            description: contestList['description'],
            entryStartDate: contestList['entry_start_date'],
            entryEndDate: contestList['entry_end_date'],
            votingStartDate: contestList['voting_start_date'],
            votingEndDate: contestList['voting_end_date'],
            contestEntryType: contestList['contest_entry_type'],
            contestEntryFee: contestList['contest_entry_fee'],
            selectionCriteriaType: contestList['selection_criteria_type'],
            votingPhase: contestList['voting_phase'],
            entryPhase: contestList['entry_phase']
          })
        });
      }
      this.carouselTileItems = [...this.carouselTileItems];
      console.log(this.carouselTileItems);
    });
  }
}

This is HTML file

  <div class="col-md-12">
  <ngu-carousel
    #myCarousel
    [inputs]="carouselTile"
    [dataSource]="carouselTileItems"
  >
    <ngu-tile *nguCarouselDef="let item; let i = index">
      <div class="service-wrap cursor-pointer">
        <div class="card o-hidden mb-4">
          <div class="card-header p-0 text-start">
            <img  class="img-responsive" src="{{item.coverImage}}" onerror="this.src='./assets/images/landing/default-no-image.png'"  alt="..." />
          </div>
          <div class="card-body text-start">
            <h3 class="card-title text-capitalize fw-bold">{{ item.contestTitle }}</h3>
            <p class="mt-0">
              <span *ngIf="item.entryPhase">Register: <b>{{ item.entryStartDate | date:'mediumDate' }}</b> to <b>{{ item.entryEndDate | date:'mediumDate'}}</b></span>
              <span *ngIf="item.votingPhase">Vote: <b>{{ item.votingStartDate | date:'mediumDate' }}</b> to <b>{{ item.votingEndDate | date:'mediumDate'}}</b></span>
            </p>
          </div>
          <div class="card-footer ps-3">
            <span *ngIf="item.contestEntryType == 'free'" class="float-start" ><b>Fee</b> Free</span>
            <span *ngIf="item.contestEntryType == 'paid'" class="float-start"><b>Fee</b> {{item.contestEntryFee}} Coins</span>
            <a [routerLink]="['/contest-details', item.contestId]" *ngIf="item.entryPhase" class="btn half-button btn-gradient float-end">
              Register
            </a>
            <a [routerLink]="['/contest-details', item.contestId]" *ngIf="item.votingPhase" class="btn half-button btn-success text-white float-end">
              Vote
            </a>
          </div>
        </div>
      </div>
    </ngu-tile>
    <span
      *ngIf="carouselTileItems.length > 4"
      NguCarouselPrev
      class="ngu_control_button half-button leftRs btn btn-circle btn-white btn-shadow"
      [style.opacity]="myCarousel.isFirst ? 0.5 : 1"
      ><i class="eva eva-chevron-left-outline"></i
    ></span>
    <span
    *ngIf="carouselTileItems.length > 4"
      NguCarouselNext
      class="ngu_control_button half-button rightRs btn btn-circle btn-white btn-shadow"
      [style.opacity]="myCarousel.isLast ? 0.5 : 1"
      ><i class="eva eva-chevron-right-outline"></i
    ></span>
  </ngu-carousel>
  <div *ngIf="carouselTileItems.length == 0"><h3 class="fw-bold text-center">Sorry! Currently no content is available.</h3></div>
</div>

I am trying to update "this.carouselTileItems" data but the view part is not reflecting. Only first-time set array data is showing, I am trying to replace array the data with the new data but the newly updated data in the array is not showing in the UI.

Thanks in advance