Как сделать drag & drop с помощью React для карточек?

Есть некий список элементов, допустим это карточки товара. Они пронумерованы 1 до n-ого количества(в моем случае это 4 элемента)

Как сделать так, что можно было менять их местами?? Например 1 карточку с 4 или 4 с 3 и т.д и т.п

Ссылка на codesandbox

import React, { Component } from "react";

class ListItems extends Component {
  render() {
    const { itemList } = this.props;
    return (
      <ul className="list">
        {itemList.map(item => {
          return (
            <li key={item.id}>
              <h2>{item.heading + "  " + item.id}</h2>
              <p>{item.text}</p>
            </li>
          );
        })}
      </ul>
    );
  }
}

export default ListItems;

Заранее искренне благодарю, те кто решился хоть как-то помочь