How to use the react-sortable-hoc.SortableContainer function in react-sortable-hoc

handleTabSequence = _props.handleTabSequence;

      if (oldIndex === newIndex) {
        if (activeIndex !== oldIndex) {
          handleTabChange(oldIndex);
        }
      } else {
        handleTabSequence({ oldIndex: oldIndex, newIndex: newIndex });
      }
    }
  }]);
  return SortMethod;
}(Component);

//      
var DragTabContainer = SortableContainer(function (_ref) {
  var children = _ref.children;

  return createElement(
    'div',
    { style: { marginTop: '50px' } },
    children
  );
});

var ModalTabListWrapper = function (_SortMethod) {
  inherits(ModalTabListWrapper, _SortMethod);

  function ModalTabListWrapper() {
    classCallCheck(this, ModalTabListWrapper);
    return possibleConstructorReturn(this, (ModalTabListWrapper.__proto__ || Object.getPrototypeOf(ModalTabListWrapper)).apply(this, arguments));
  }

settings?: SettingsResponse
    sorted?: string[][]
    stats?: StatDescription[]
}

interface Props {
    onUpdate: () => void
}

//  Component which uses drag-n-drop activation when clicking inside the component
const DragHandle = SortableHandle(({style}) => (
    < span style={{...style, ...{cursor: " move "}}}> {" ::: "} )
)

// Universal component for turning a TableBody into a sortable container
const TableBodySortable = SortableContainer(({children, displayRowCheckbox}) => (
    
        {children}
    
))

const Row = SortableElement(({name, children}) => {
    return (
        
            
                
            
            
                {children}
            
        
    )

}
}

SceneGrid.defaultProps = {
  scenes: [],
  selectedThumbsArray: [],
  scenesToDim: [],
};

SceneGrid.propTypes = {
  scenes: PropTypes.array,
  selectedThumbsArray: PropTypes.array,
  scenesToDim: PropTypes.array,
};

const SortableSceneGrid = SortableContainer(SceneGrid);

export default SortableSceneGrid;

}
}

const SortableParameterElement = SortableElement((props: IParameterProps) => );

interface ISortableParametersProps extends SortableContainerProps {
  parameters: IParameter[];
  allParametersPinned: boolean;
  setPinAllParametersState: () => void;
  togglePins: () => void;
  removeParameter: (index: number) => void;
  updateParameter: (index: number, changes: { [key: string]: any }) => void;
  isMultiple: boolean;
}

const SortableParameters = SortableContainer((props: ISortableParametersProps) => (
  <div>
    <div>
      <label>
        <input checked="{props.allParametersPinned}" type="checkbox">
        <span>Pin all parameters </span>
        
      </label>
    </div>
    {props.parameters &amp;&amp;
      props.parameters.map((parameter, index) =&gt; {
        return (
           props.removeParameter(index)}</div>

const ProgrammeScriptContainer = (props) => {
  const [ items, setItems ] = useState(props.items);

  const onSortEnd = ({ oldIndex, newIndex }) => {
    const result = arrayMove(items, oldIndex, newIndex);
    props.handleReorder(result);
    setItems(result);
  };

  const SortableList = SortableContainer(({ children }) =>
    <ul style="{">
      {children}
    </ul>
  );

  const elements = ProgrammeElements(items, props.handleEdit, props.handleDelete);

  return (
    
      {elements}
    
  );

};

);
                })}
            
        
         {
                    environment.currentSprite.dplcs.splice(dplcIndex, 1);
                }}
                >
           Delete
        
    
)));

const SortableDPLCList = SortableContainer(observer(({items}) => {
    return (
        <div>
            {items.map((dplc, index) =&gt; (
                
            ))}
        </div>
    );
}), {withRef: true});

@observer
export class RawEditor extends Component {

}

LabelSortableList.propTypes = {
    items: PropTypes.array.isRequired,
    onEditLabel: PropTypes.func,
    onRemoveLabel: PropTypes.func,
    onToggleChange: PropTypes.func
};

LabelSortableList.defaultProps = {
    onEditLabel: noop,
    onRemoveLabel: noop,
    onToggleChange: noop
};

export default SortableContainer(LabelSortableList);

getSortableList() {

        const { items, children, className } = this.props;

        //create the sortable container:
        return SortableContainer(() => {

            //loop through all available children
            return (
                <div>
                    {children.map((child, index) =&gt; {

                        child.props['tabindex'] = '0';
                        child.props['onKeyDown'] = this.onKeyDown;

                        //generate a SortableElement using the item and the child
                        let SortableItem = SortableElement(() =&gt; {
                            return (child)
                        });

                        //set a temporary class so we can find it post-render:
                        if (index == this.focusIndex) {</div>

import React from "react";
import { SortableContainer, arrayMove } from "react-sortable-hoc";
import { Link } from "react-router-dom";

import LikeButton from "../like_button/like_button_container";
import ImageDefault from "../image_default";
import PlayPauseButton from "../play_pause_button/play_pause_button_container";
import NextUpIndexItem from "./next_up_index_item_container";

const NextUpList = SortableContainer(({ trackIds }) => {
  return (
    <ul>
      {trackIds.map((id, index) =&gt; (
        
      ))}
    </ul>
  );
});

class NextUpComponent extends React.Component {
  constructor(props) {
    super(props);
    this.onSortEnd = this.onSortEnd.bind(this);
  }

  onSortEnd({ oldIndex, newIndex }) {