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

import Interval from "../interval/interval";
import Icon from "../icon/icon";
import { ICONS, NOTES } from "../../constants";

const DragHandle = sortableHandle(() => (
  <span>
    
  </span>
));

const SortableInterval = sortableElement(({ value }) =&gt; (
  <section>
    
  </section>
));
const SortableIntervalContainer = sortableContainer(({ children }) =&gt; (
  <ul>{children}</ul>
));

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest function.
  useEffect(() =&gt; {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() =&gt; {
    function tick() {
      savedCallback.current();
    }

function LayerManagerFactory(AddDataButton, LayerPanel, SourceDataCatalog) {
  // By wrapping layer panel using a sortable element we don't have to implement the drag and drop logic into the panel itself;
  // Developers can provide any layer panel implementation and it will still be sortable
  const SortableItem = sortableElement(({children, isSorting}) => {
    return (
      
        {children}
      
    );
  });

  const SortableContainer = sortableContainer(({children}) => {
    return <div>{children}</div>;
  });

  return class LayerManager extends Component {
    static propTypes = {
      datasets: PropTypes.object.isRequired,
      layerBlending: PropTypes.string.isRequired,
      layerClasses: PropTypes.object.isRequired,
      layers: PropTypes.arrayOf(PropTypes.any).isRequired,
      // functions
      addLayer: PropTypes.func.isRequired,
      layerColorUIChange: PropTypes.func.isRequired,
      layerConfigChange: PropTypes.func.isRequired,
      layerTextLabelChange: PropTypes.func.isRequired,
      layerVisualChannelConfigChange: PropTypes.func.isRequired,
      layerTypeChange: PropTypes.func.isRequired,

import { sortableContainer, sortableElement } from "react-sortable-hoc";
import { List, AutoSizer } from "react-virtualized";
import VirtualLayers from "./VirtualLayers.jsx";
import arrayMove from "array-move";
import GeoJSON from "ol/format/GeoJSON.js";

// CUSTOM
import "./Layers.css";
import * as helpers from "../../../helpers/helpers";
import * as TOCHelpers from "./TOCHelpers.jsx";
import FloatingMenu, { FloatingMenuItem } from "../../../helpers/FloatingMenu.jsx";
import { Item as MenuItem } from "rc-menu";
import Portal from "../../../helpers/Portal.jsx";
import TOCConfig from "./TOCConfig.json";

const SortableVirtualList = sortableContainer(VirtualLayers, { withRef: true });

class Layers extends Component {
  constructor(props) {
    super(props);

    this.storageKey = "layers";
    this.lastPosition = null;
    this.virtualId = "sc-toc-virtual-layers";
    this.state = {
      allLayers: {},
      layers: []
    };

    // LISTEN FOR MAP TO MOUNT
    window.emitter.addListener("mapLoaded", () => this.onMapLoad());

docId,
      title,
      url,
      parentId,
      depth
    }
  }
`);

const moveTocList = graph(`
  mutation (@autodeclare) {
    moveToc(id: $id, targetId: $targetId, position: $position )
  }
`);

const SortableContainer = sortableContainer(
  ({ children }) =&gt; <ul>{children}</ul>,
);

export default class TocList extends React.PureComponent {
  constructor(props) {
    super(props);
    this.sorting = false;
    this.state = {
      items: [],
      folders: [],
      loading: true,
    };
  }

  componentDidMount() {
    this.getTocList();

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

  return sortableContainer(unoList);
};

import React, {Component} from 'react';
import {render} from 'react-dom';
import {Table, Column} from 'react-virtualized';
import {sortableContainer, sortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';
import 'react-virtualized/styles.css';

const ROW_HEIGHT = 30;
const HEADER_ROW_HEIGHT = 20;
const COL_WIDTH = 100;

const SortableHeader = sortableElement(({children, ...props}) =>
  React.cloneElement(children, props),
);

const SortableHeaderRowRenderer = sortableContainer(
  ({className, columns, style}) => (
    <div style="{style}" role="row">
      {React.Children.map(columns, (column, index) =&gt; (
        {column}
      ))}
    </div>
  ),
);

class TableWithSortableColumns extends Component {
  state = {
    cols: [
      {dataKey: 'col1', label: 'Column 1'},
      {dataKey: 'col2', label: 'Column 2'},
      {dataKey: 'col3', label: 'Column 3'},
    ],

import React, {Component} from 'react';
import {render} from 'react-dom';
import {sortableContainer, sortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';

const SortableItem = sortableElement(({value}) =&gt; <li>{value}</li>);

const SortableContainer = sortableContainer(({children}) =&gt; {
  return <ul>{children}</ul>;
});

class App extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };

  onSortEnd = ({oldIndex, newIndex}) =&gt; {
    this.setState(({items}) =&gt; ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

  render() {
    const {items} = this.state;

import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form } from 'reactstrap';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';

import Check from './FormControl/Check';
import { sortKeys, arrayMove } from '../utils';

const DragHandle = sortableHandle(() =&gt; <i>);

const SortableItem = sortableElement(({ children }) =&gt; (
  <div style="{{">
    
    {children}
  </div>
));

const SortableContainer = sortableContainer(({ children }) =&gt; <div>{children}</div>);

class TableConfigurator extends React.Component {
  constructor(props) {
    super(props);
    this.handleModalShow = this.handleModalShow.bind(this);
    this.handleModalHide = this.handleModalHide.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSortEnd = this.handleSortEnd.bind(this);
    this.bindModalNode = this.bindModalNode.bind(this);

    this.state = {
      showModal: false,
    };
  }

  handleModalShow() {</i>

const {element, onChange, classes} = this.props;
    return (
      <div>
        
        
      </div>
    );
  }
}

const GndSortableElement = sortableElement(withStyles(styles)(GndElement));

const GndSortableContainer = sortableContainer(({children}) =&gt; 
  <div>{children}</div>
);

export {GndSortableElement, GndSortableContainer}

edit
        
        <button color="{'secondary'}">{
          e.preventDefault()
          deleteRule(object)
        }}&gt;
          delete
        </button>
    
));

const SortableContainer = sortableContainer(({children}) =&gt; {
  return {children};
});

class AssignmentRules extends React.Component {

  state = {
    isOpen: false,
    currentRule: null,
    rules: [],
    conditions: []
  }

  componentDidMount(){
    this.getAssignmentRules()

    this.props.dispatch(setCurrentPage("Assignment Rules"))