sortablejs changing list first and adding new element make element positions incorrect

I am creating simple sortablejs list that can add new element after the current element and change the position. when I drag and change element to last element and add new element will add new element to the top of the element. but I want to add that below the current element.

import { Component } from '@angular/core';
import { Options } from 'sortablejs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'my-app';
  items = [1, 2, 3, 4, 5];
  items2 = this.items.slice();

  draggableOptions: Options = {
    onUpdate: (event) => {
      let newArr2 = this.items.slice();
      let newEle = this.items.splice(event.oldIndex, 1)[0];

      this.items.splice(event.newIndex, 0, newEle);
    },
    onStart: (event) => {
      // ExcelStore.dispatch({type: ExcelAction.SECTION_DRAG_START, payload: {dragIndex : event.oldIndex}});
    },
    sort: true,
  };

  addNew(item) {
    let currentIndex = this.items.indexOf(item);
    console.log(item);
    this.items.splice(currentIndex + 1, 0, item + 15);
    //this.items.push(item+15)
  }

  checkIndex(item) {
    console.log(this.items);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<h2>Drag / drop the item</h2>
<div [sortablejs] [sortablejsOptions]="draggableOptions">
  <div *ngFor="let item of items"  style="border: 1px solid" >
    <h4>{{ item }}</h4>
    <button (click)="addNew(item)">Add new</button>
    <button (click)="checkIndex(item)">check index</button>
  </div>
</div>