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

import PaperCut from './PaperCut';
import TitleHeading from './TitleHeading';
import Note from './Note';

import {
  faGripLines,
  faPen,
  faTrash,
  faArrowAltCircleLeft,
  faArrowAltCircleRight
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const InsertPoint = (({ text }) =&gt; <span style="{">  {text} </span>);

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

const SortableItem = sortableElement(({ value, index, type, handleDelete, handleEdit }) =&gt; {
  return (<li>
    
      
        
      
      
        {value}
      
      
        {/* TODO: if paper-cut  then don't show edit/pen icon */}
        {type !== 'paper-cut' &amp;&amp; type !== 'insert-point' ?  { handleEdit(index); } } /&gt; : null}

      
      </li>

},
  wrapper: {
    [theme.breakpoints.down('sm')]: {
      width: '100vw'
    },
    [theme.breakpoints.up('md')]: {
      width: '100%'
    },
    [theme.breakpoints.up('lg')]: {
      width: '100%'
    },
  }

});

const DragHandle = sortableHandle(() => );

const SortableItem = sortableElement(({object, deleteRule, edit, classes}) => (
    
        

        

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

color: theme.palette.primary.main,
      cursor: 'pointer',
    },
  },
  searchInput: {
    height: 25,
    fontSize: 13,
    margin: theme.spacing(1, 0),
    padding: theme.spacing(0, 1),
    borderRadius: 3,
    background: darken(theme.palette.background.default, 0.15),
    color: fade(theme.palette.secondary.dark, 0.6),
  },
}))

const DradHandle = sortableHandle(({ children }) => children)

const Item = ({
  value: screen,
  sortIndex,
  updateVisibility,
  classes,
  onClick,
  disableSort = false,
  toggleScreenDialog,
}) => (
  
    <div>
       updateVisibility(screen.id, !screen.visible)}
        size="small"
      &gt;</div>

sortableElement,
  sortableHandle,
  arrayMove
} from "react-sortable-hoc";

import "./app.css";

import ring from "../../util/ring";
import Header from "../header/header";
import Footer from "../footer/footer";
import Section from "../section/section";
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();

import { ReactComponent as HandleIcon } from "@webiny/app-forms/admin/icons/round-drag_indicator-24px.svg";
import { validation } from "@webiny/validation";

const optionListItem = css({
    zIndex: 10,
    display: "flex",
    justifyContent: "space-between",
    borderBottom: "1px solid gray",
    background: "white"
});

const sortableList = css({
    zIndex: 20
});

const DragHandle = sortableHandle(() => (
    } />
));

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

const SortableItem = sortableElement(
    ({
        setOptionsValue,
        setEditOption,
        option,
        optionsValue: options,
        Bind,
        multiple,
        optionIndex

import {sortableHandle} from 'react-sortable-hoc';
import chevronRightIcon from '@jetbrains/icons/chevron-right.svg';
import chevronDownIcon from '@jetbrains/icons/chevron-down.svg';
import dragIcon from '@jetbrains/icons/drag.svg';

import focusSensorHOC from '../global/focus-sensor-hoc';
import Checkbox from '../checkbox/checkbox';
import Button from '../button/button';
import Tooltip from '../tooltip/tooltip';

import getUID from '../global/get-uid';

import Cell from './cell';
import style from './table.css';

const DragHandle = sortableHandle(({alwaysShowDragHandle}) => {
  const classes = classNames(style.dragHandle, {
    [style.visibleDragHandle]: alwaysShowDragHandle
  });

  return (
    <button title="Drag">
  );
});

class Row extends PureComponent {
  static propTypes = {
    className: PropTypes.string,</button>

`;

const StyledDragHandle = styled.div`
  display: flex;
  align-items: center;
  opacity: 0;
  z-index: 1000;

  :hover {
    cursor: move;
    opacity: 1;
    color: ${props => props.theme.textColorHl};
  }
`;

const DragHandle = sortableHandle(({className, children}) =>
  
    {children}
  
);

const LayerPanelHeader = ({
  className,
  idx,
  isConfigActive,
  isDragNDropEnabled,
  isVisible,
  label,
  layerId,
  layerType,
  labelRCGColorValues,
  onToggleVisibility,

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

const DragHandle = sortableHandle(() =&gt; <span>::</span>);

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'],
  };

const renderField = ({ input, meta: { touched, error } }) => {
  const classContainer =
    touched && error ?
      'DashboardTableColumns__container-input--error' :
      'DashboardTableColumns__container-input';

  return (
    <div>
      <input type="text" id="{input.name}">
      {touched &amp;&amp; (error &amp;&amp; <span>{error}</span>)}
    </div>
  );
};

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

const SortableItem = SortableElement(({ item, fieldColumnData }) =&gt; (
  
    <div>
      
      
      <div>
        </div></div></div>

);
}

const dragHandleStyle = {
  background:
    'linear-gradient(180deg,#000,#000 20%,#fff 0,#fff 40%,#000 0,#000 60%,#fff 0,#fff 80%,#000 0,#000)',
  width: 25,
  minWidth: 25,
  height: 20,
  opacity: 0.25,
  cursor: 'move',
};
const DragHandle = sortableHandle(({ style }) => (
  <div style="{{">
));
</div>