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

import { isFunction, wrap } from 'lodash';
import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';

import './style.less';

export const DragHandle = sortableHandle(({ className, ...restProps }) => (
  <div>
));

export const SortableContainerWrapper = sortableContainer(({ children }) =&gt; children);

export const SortableElement = sortableElement(({ children }) =&gt; children);

export function SortableContainer({ disabled, containerComponent, containerProps, children, ...wrapperProps }) {
  const containerRef = useRef();
  const [isDragging, setIsDragging] = useState(false);

  wrapperProps = { ...wrapperProps };
  containerProps = { ...containerProps };

  if (disabled) {
    // Disabled state:
    // - forbid drag'n'drop (and therefore no need to hook events
    // - don't override anything on container element
    wrapperProps.shouldCancelStart = () =&gt; true;
  } else {
    // Enabled state:
</div>

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

const SortableItem = sortableElement(({height, value}) => {
  return <li style="{{height}}">{value}</li>;
});

const SortableInfiniteList = sortableContainer(({items}) =&gt; {
  return (
     height)}
    &gt;
      {items.map(({value, height}, index) =&gt; (

await storage.write(STORAGE_KEY_COLLAPSED_STATE, newValue, STORAGE_AREA_NAME_COLLAPSED_STATE)
  }

  function getProfilePageUrl(userId) {
    return `${window.location.protocol}//fanfou.com/${userId}`
  }

  const SortableList = sortableContainer(({ items, instance }) => (
    <ul>
      { items.map((item, index) =&gt; (
        
      )) }
    </ul>
  ))

  const SortableItem = sortableElement(({ item, instance }) =&gt; (
    <li>
      <a title="{item.nickname}" href="{getProfilePageUrl(item.userId)}">
        
        <img alt="{`@${item.nickname}" src="{item.avatarUrl}"> instance.onClickAvatar(event, item)} /&gt;
        <span>{item.nickname}</span>
      </a>
    </li>
  ))

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

  class FavoriteFanfouers extends Component {
    constructor(...args) {
      super(...args)</div>

import React from 'react';
import PropTypes from 'prop-types';
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);</i>

class GndElement extends React.Component {
  render() {
    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}

render() {
    return (
      
    );
  }
}


export default sortableElement(DraggableRow);

<a href="#ml-assistance">ML Assistance</a>
              
              
                <a href="#delete-project">Delete Project</a>
              
            
          
        
      
    );
  }
}

const SortableItem = sortableElement(LabelFormItem);

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

const newFormPart = () =&gt; {
  const id = Math.random()
    .toString(36)
    .substr(2, 9);
  return {
    id,
    name: 'New label',
    type: 'bbox',
  };
};

render() {
    const { index, dragText } = this.props;
    const { childButtonHovered } = this.state;
    return (
      
    );
  }
}

const SortableItem = sortableElement(
  ({ value, childButtonHovered, dragText }) => (
    
      <div>
        {value}
      </div>
    
  )

import { includes, map, extend, fromPairs } from 'lodash';
import React, { useMemo, useCallback } from 'react';
import { useDebouncedCallback } from 'use-debounce';
import Table from 'antd/lib/table';
import Input from 'antd/lib/input';
import Radio from 'antd/lib/radio';
import { sortableElement } from 'react-sortable-hoc';
import { SortableContainer, DragHandle } from '@/components/sortable';
import { EditorPropTypes } from '@/visualizations';
import ChartTypeSelect from './ChartTypeSelect';
import getChartData from '../getChartData';

const SortableBodyRow = sortableElement(props => );

function getTableColumns(options, updateSeriesOption, debouncedUpdateSeriesOption) {
  const result = [
    {
      title: 'Order',
      dataIndex: 'zIndex',
      className: 'text-nowrap',
      render: (unused, item) => (
        <span>
          
          {item.zIndex + 1}
        </span>
      ),
    },
    {
      title: 'Label',

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

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

class VirtualList extends Component {
  renderRow = ({index}) =&gt; {
    const {items} = this.props;
    const {value} = items[index];

    return ;
  };

  getRowHeight = ({index}) =&gt; {
    const {items} = this.props;
    return items[index].height;
  };