Sorting the grid in xy axis using react-sortable-hoc

I am using react-sortable-hoc to dragging and dropping grid of elements. For me it is working fine if it a single column. but if it is a multiple column(grid), it is not working as expected. not sure what i am doing wrong. The live code example is in below link https://stackblitz.com/edit/react-qfqmnp?file=src/App.js

import React, { useState, useEffect } from 'react';
import './style.css';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';

const list = [
  'Item 1',
  'Item 2',
  'Item 3',
  'Item 4',
  'Item 5',
  'Item 6',
  'Item 7',
  'Item 8',
  'Item 9',
  'Item 10',
  'Item 11',
  'Item 12',
  'Item 13',
  'Item 14',
  'Item 15',
  'Item 16',
  'Item 17',
  'Item 18'
];

const SortableListItem = SortableElement(({ item }) => {
  return <li className="list-group-item"> {item} </li>;
});

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul className="list-group">
      {items.map((item, index) => {
        return (
          <SortableListItem axis="xy" key={index} index={index} item={item} />
        );
      })}
    </ul>
  );
});

export default function App() {
  const [items, setItems] = useState(list);

  const onSortEnd = ({ oldIndex, newIndex }) => {
    setItems(arrayMove(items, oldIndex, newIndex));
  };

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <SortableList items={items} onSortEnd={onSortEnd} />
    </div>
  );
}