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

import { connect } from 'react-redux';
import { toggleModal } from 'redactions/modal';
import { toggleTooltip, setTooltipPosition } from 'redactions/tooltip';
import { setLayerGroupOpacity } from 'redactions/explore';

// Components
import LegendType from 'components/ui/LegendType';
import Icon from 'components/ui/Icon';
import LayerInfoModal from 'components/modal/LayerInfoModal';
import LayersTooltip from 'components/app/explore/LayersTooltip';
import SliderTooltip from 'components/app/explore/SliderTooltip';
import Button from 'components/ui/Button';

const TIMELINE_INTERVAL_TIMER = 3000;

const SortableItem = SortableElement(({ value }) => value);

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

const SortableList = SortableContainer(({ items }) =&gt; (
  <ul>
    {items.map((value, index) =&gt;
      
    )}
  </ul>
));

class Legend extends React.PureComponent {

placeholderImage?: string;
  images: ProductDetails_product_images[];
  loading?: boolean;
  onImageDelete: (id: string) => () => void;
  onImageEdit: (id: string) => () => void;
  onImageUpload(file: File);
  onImageReorder?(event: { oldIndex: number; newIndex: number });
}

interface ImageListContainerProps extends WithStyles {
  items: any;
  onImageDelete: (id: string) => () => void;
  onImageEdit: (id: string) => () => void;
}

const SortableImage = SortableElement(
  ({ image, onImageEdit, onImageDelete }) => (
     onImageEdit(image.id) : undefined}
      onImageDelete={onImageDelete}
    />
  )
);

const ImageListContainer = SortableContainer(
  withStyles(styles, { name: "ImageListContainer" })(
    ({
      classes,
      items,
      onImageDelete,
      onImageEdit,

onImageEdit: (id: string) => () => void;
  onImageReorder?: ReorderAction;
  onImageUpload(file: File);
}

interface SortableImageProps {
  image: {
    id: string;
    alt?: string;
    url: string;
  };
  onImageEdit: (id: string) => void;
  onImageDelete: () => void;
}

const SortableImage = SortableElement(
  ({ image, onImageEdit, onImageDelete }) => (
     onImageEdit(image.id) : undefined}
      onImageDelete={onImageDelete}
    />
  )
);

interface ImageListContainerProps {
  className: string;
  items: ProductDetails_product_images[];
  preview: ProductDetails_product_images[];
  onImageDelete: (id: string) => () => void;
  onImageEdit: (id: string) => () => void;
}

import { Icon, Popup } from 'semantic-ui-react';
import Scene from './Scene';
import styles from './SceneGrid.css';
import stylesApp from '../containers/App.css';
import stylesPop from './Popup.css';
import {
  getWidthOfSingleRow, getPreviousScenes, getNextScenes
} from '../utils/utils';
import {
  VIDEOPLAYER_FIXED_PIXEL_PER_FRAME_RATIO,
  VIDEOPLAYER_SCENE_MARGIN,
  VIEW,
  SHEET_TYPE,
} from '../utils/constants';

const SortableScene = SortableElement(Scene);

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

    this.state = {
      controllersVisible: undefined,
      scenesToDim: [],
    };

    this.resetHover = this.resetHover.bind(this);

  }

  componentWillMount() {
  }

const createOptions = (model, items) => ({
  label: model,
  options: items.map(item => ({
    value: item.id,
    label: labels[model](item),
    model
  }))
});

const DragHandle = SortableHandle(() => (
  <span style="{{marginTop:">
    
  </span>
));

const SortableItem = SortableElement(({id, label, model, onDrop}) =&gt; (
  <li>
    <span style="{{marginBottom:">
      
      <small><em>{TITLES[model]}</em></small>&nbsp;- {label}
      &nbsp;<button>
    
  </button></span></li>
));

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

import React, { useState } from 'react';
import {
  SortableContainer,
  SortableElement,
  arrayMove,
} from 'react-sortable-hoc';
import PropTypes from 'prop-types';
import { FiTrash } from 'react-icons/fi';

const SortableItem = SortableElement(({
  slideNo,
  props,
}) => {
  const [hoveringOnDelete, setHoveringOnDelete] = useState(false);
  const [currentHovering, setCurrentHovering] = useState(-1);
  return (
    <div style="{{"> {
        if (!hoveringOnDelete) {
          props.changeSlide(slideNo);</div>

color: ${colors.primary};
  opacity: ${props => (props.disabled ? '0' : '1')};
  cursor: grab;
  user-select: none;
`

const DragHandle = SortableHandle(({ disabled }) => {
  return ::
})

const Item = styled.div`
  z-index: 2;
  min-width: 80px;
`

const SortableItem = SortableElement(({ value }) => {
  return (
    
      
      {titleCase(value)}
    
  )
})

const SortableList = SortableContainer(({ items }) => {
  return (
    
      {items.map((value, index) => (

const {
			extension,
		} = this.props;
		const {
			values,
		} = this.state;

		return await extension.field.setValue(values.map(({value}) => value));
	}
}

const Handle = SortableHandle(() => (
	<div>
));

const SortableItem = SortableElement(({id, value, onChange, onDelete, autoFocus}) =&gt; (
	<li data-id="{id}">
		
		<input value="{value}">
		<button title="Delete" type="button">
			×
		</button>
	</li>
));

const SortableList = SortableContainer(({items, onChange, onDelete, focus, dragging}) =&gt; (
	<ol>
		{items.map(({id, value}, index) =&gt; (
			</ol></div>

import React, { Component } from 'react';
import { environment } from '#store/environment';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
import { hexToMDHex } from '#formats/palette';
import ColorPicker from 'rc-color-picker';

const Handle = SortableHandle(({lineIndex}) =&gt; <div>
    {lineIndex}
</div>);

const SortableItem = SortableElement(observer(({line, lineIndex}) =&gt; (
    <div>
        
        {line.map((color, colorIndex) =&gt; {
            return <div style="{{">
                </div></div>