V5 - ion-reorder not working properly when inside a scrollable div

I have a todo list where all the items are inside a scrollable div, but only if the scroll position is all the way up the reorder works as expected, but once you scroll down, the new position of the item spans upwards with the respectable distance from the div’s top.

Here is a GIF of the problem:
https://s1.gifyu.com/images/QicEXUbQKb.gif

What are we seeing here?
The first drag works fine, but when you scroll down a little bit it gets messy.

This is the HTML structure of the component (cleaned from css and click events):

  <div>

    <!-- list name + search -->
    <div>
      <p><span>{{ settings.name }}</span></p>
      <input type="text" placeholder="Search items...">
    </div>
  
    <!-- items -->
    <ion-reorder-group (ionItemReorder)="doReorder($event)">
      <div *ngFor="let item of items">
        <ion-item lines="none" > 
          <nb-checkbox></nb-checkbox>
          <input type="text" placeholder="Item name..." >
          <nb-icon icon="trash-2-outline"></nb-icon>
          <ion-reorder slot="end"></ion-reorder>
        </ion-item>
      </div>
    </ion-reorder-group>
  
    <!-- add button -->
    <nb-form-field >
      <input type="text" nbInput placeholder="Add new item...">
      <button nbSuffix nbButton ghost type="submit">
        <nb-icon icon="plus-outline"></nb-icon>
      </button>
    </nb-form-field>

  </div>

I’m using:
Ionic v5.0.0
Nebular v6.2.1

How can I approach to fixing this?