Sorting is not working for y axis properly

[Pavan-RESTs]

Applied the boiler plate provided in the documentation exactly as it is with a couple of containers with the model passed to the addon as an array of color which differentiates each container for visualizing the sorting functionality.

Along the default direction which is the y axis sorting seems to only work with the first two elements that too if the second element is dragged over the first element. Just to ensure i changed the sort direction to x axis (no other changes) it worked fine. But with default y axis i got this bug.

index.hbs

{{page-title "Index"}}
{{!-- template-lint-disable no-inline-styles --}}
{{!-- template-lint-disable style-concatenation --}}
<div style="display: flex; flex-direction: row;" {{sortable-group onChange=this.reorderItems direction="x"}}>
  {{#each this.model as |color index|}}
    <div style="width: 200px;
    height: 100px;
    background-color: {{color}};
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border: 1px solid white;
    " {{sortable-item model=color spacing=20}}> Container-{{index}}
      <button type="button" style="margin-left: 20px;" {{sortable-handle}}> ^ </button>
    </div>
  {{/each}}
</div>

controller/index.js

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class IndexController extends Controller {

  @action
  reorderItems(part) {
    this.model = part;
  }
}

routes/index.js

import Route from '@ember/routing/route';

export default class IndexRoute extends Route {
  model() {
    return ['red', 'blue', 'green', 'teal', 'purple'];
  }

  setupController(controller, model) {
    controller.set('model', model);
  }
}

Versions used:

• ember-cli@3.28.6
• ember-sortable@3.0.0