Angular CDK drag & drop cdk: Items change with animation

In angular 18 I have implemented a simple component using Angular drag & drop cdk (u can see better examples here):

import {Component} from '@angular/core';
import {
  CdkDrag,
  CdkDragDrop,
  CdkDragPlaceholder,
  CdkDropList,
  moveItemInArray,
} from '@angular/cdk/drag-drop';

@Component({
  standalone: true,
  selector: 'cdk-drag-drop-custom-placeholder-example',
  template: `<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  @for (movie of movies; track movie) {
    <button (click)="moveUp(movie)">Up</button>
    <button (click)="moveDown(movie)">Down</button>
    <div class="example-box" cdkDrag>
      <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
      {{movie}}
    </div>
  }
</div>`,
  styleUrl: 'cdk-drag-drop-custom-placeholder-example.css',
  imports: [CdkDropList, CdkDrag, CdkDragPlaceholder],
})
export class CdkDragDropCustomPlaceholderExampleComponent {
  movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
  ];

  moveUp(item: string) {
    const index = this.movies.indexOf(item);
    moveItemInArray(this.movies, index, index - 1);
  }

  moveDown(item: string) {
    const index = this.movies.indexOf(item);
    moveItemInArray(this.movies, index, index + 1);
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }
}

this simple code works and when dragging the movies around then there is animation which is moving them in the array,

The problem starts when using the buttons up/down to move the items,
they are switching places but instantly and with no animation at all.

I would love to know how to enable the animation when changing the array manually.
Thanks!