Carousel stuck/duplicates of same item

[La-kshya]

If you change the carousel config i.e. the value to inputs in the carousel component the carousel will not update/have issues.
Also during migration from version 7.2 the *nguCarouselDef directive is not destroying items on change but I am having trouble reproducing it on your example applications. Either something changed that is not mentioned in breaking changes or I am messing something up. Would appreciate any help

To Reproduce

export class TileComponent {
  images = ['assets/bg.jpg', 'assets/car.png', 'assets/canberra.jpg', 'assets/holi.jpg'];

  public carouselItems = signal<string[]>([]);
  public carouselTileConfig: NguCarouselConfig = {
    grid: { xs: 1, sm: 1, md: 1, lg: 5, all: 0 },
    speed: 250,
    point: {
      visible: true
    },
    touch: true,
    loop: true,
  };

  constructor() {
    this.addItem();
    afterNextRender(() => {
      const id = setInterval(() => {
        this.addItem();
        if (this.carouselItems().length >= 30) {
          clearInterval(id);
        }
      }, 500);
    });

   setTimeout(()=>{
    this.carouselTileConfig={
      grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },
      slide:1,
      speed: 250,
    point: {
      visible: true
    },
    load:2,
    touch: true,
    loop: true,
    }
   },4000) ;
  }

  private addItem() {
    const i = Math.floor(Math.random() * this.images.length);
    this.carouselItems.update(items => [...items, this.images[i]]);
  }
}