react-sortable-hoc optimisations and docs help

I currently have this version of a drag and drop sortable list working with react-virtuoso. My goal is to get this documented either here or on react-sortable-hoc docs.

If i could get some help on if there are better ways to get the index in ItemContainer, and help on whether using ItemContainer and ListContainer are even the best options to accomplish this: Then i will go to react-sortable-hoc and make a PR to add react-virtuoso docs to the ones they have already for react-virtualized, react-infinite, and tiny-react-virtual-list

Alternatively this could be added to the docs in this repo too on how to use drag and drop in the virtual list

import React, { useCallback } from 'react';
import { Virtuoso } from 'react-virtuoso';
import { sortableContainer, sortableElement } from 'react-sortable-hoc';

const ItemContainerSortable = sortableElement(
  props =>  <div {...props}  />
);

const ItemContainer = props => {
  const {
    ['data-index']: index
    // I dont know if theres a better way to do this
    // but ItemContainerSortable requires an index prop to work
  } = props;
  return <ItemContainerSortable index={index} {...props} />;
};

const ListContainerSortable = sortableContainer(
  ({ listRef, children, className, style }) => (
    <div
      ref={listRef}
      className={className}
      style={style}
    >
      {children}
    </div>
  )
);

const List = props => {
  const {
    onSortEnd
  } = props;

  const ListContainer = useCallback(
    (props) => (
      <ListContainerSortable
        {...props}
        onSortEnd={onSortEnd}
      />
    ),
    [onSortEnd]
  );

  return (
    <Virtuoso
      {...props}
      ItemContainer={ItemContainer}
      ListContainer={ListContainer}
    />
  )
}

[petyosi]

The example is deployed to the site.

[petyosi]

@itrare post your implementation and point towards the problems you are facing.