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

import './index.scss';

const ExtensionMap = {
  [Assets.extensionName]: Assets,
  [Aliyun.extensionName]: Aliyun,
  [Def.extensionName]: Def,
  [Git.extensionName]: Git,
  [Dependencies.extensionName]: Dependencies,
  [Layouts.extensionName]: Layouts,
  [Pages.extensionName]: Pages,
  [Proxies.extensionName]: Proxies,
  [Todo.extensionName]: Todo,
};

// eslint-disable-next-line babel/new-cap
const DragHandle = SortableHandle(() => (
  <span>
));
// eslint-disable-next-line babel/new-cap
const SortableExtensionItem = SortableElement(
  ({ Component, isSorting, props }) =&gt; {
    return (
      <div>
        
        
      </div>
    );</span>

import { getChartSettings } from "../../../../Requests/Player/getPlayStyle"
import { getStatsList } from "../../../../Requests/Replay"
import { LoadableWrapper } from "../../../Shared/LoadableWrapper"

interface State {
    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 (

import React from 'react';
import {
  SortableContainer,
  SortableElement,
  SortableHandle
} from 'react-sortable-hoc';
import DragHandleImage from '../../images/drag-handle.png';

export const DragHandle = SortableHandle(() =>
  <img alt="::" width="{18}" src="{DragHandleImage}">
);

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

const SortableList = SortableContainer(({items, ...rest}) =&gt; {
  return (
    <div>
      {items.map((item, index) =&gt; (
        </div>

IListenerActionType,
} from 'amazon/domain';
import { AmazonCertificateReader } from 'amazon/certificates/AmazonCertificateReader';
import { IAuthenticateOidcActionConfig, OidcConfigReader } from 'amazon/loadBalancer/OidcConfigReader';

import { ConfigureOidcConfigModal } from './ConfigureOidcConfigModal';
import { AmazonCertificateSelectField } from '../common/AmazonCertificateSelectField';
import { ConfigureRedirectConfigModal } from './ConfigureRedirectConfigModal';

export interface IALBListenersState {
  certificates: { [accountId: number]: IAmazonCertificate[] };
  certificateTypes: string[];
  oidcConfigs: IAuthenticateOidcActionConfig[];
}

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

const defaultAuthAction = {
  authenticateOidcConfig: {
    authorizationEndpoint: '',
    clientId: '',
    issuer: '',
    scope: 'openid',
    sessionCookieName: 'AWSELBAuthSessionCookie',
    tokenEndpoint: '',
    userInfoEndpoint: '',
  },
  type: 'authenticate-oidc',
} as IListenerAction;
</span>

import React from 'react'
import { SortableElement, SortableHandle } from 'react-sortable-hoc'

const Handle = SortableHandle(() => (
  <span style="{{">Drag me</span>
))

function SurveyCreateQuestion({
  question,
  edited,
  onSelect,
  onDeselect,
  onDelete,
  onEdit,
  deleted,
  disabledImp: disabled,
}) {

margin: 0 auto;
    width: 0%;
    opacity: 1;
  }
`

const Handle = styled.span`
  position: relative;
  right: 25px;
  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)}
    
  )
})

? this.props.editKey
                : this.props.view.label;

        return (
             this.props.onChildAdd()}
                tooltip={this.props.view.tooltip}
                label={label}
                labelClassName={`${optionLabelStyle}`}
            />
        );
    }
}
const DragHandle = SortableHandle(() => (
    <span>
));
const ChildItem = SortableElement(
    (props: IArrayProps &amp; { child: React.ReactNode; updateIndex: number }) =&gt; {
        const valueLength = Array.isArray(props.value) ? props.value.length : 0;
        const { minItems = 0 } = props.schema;
        const disabled = props.view.disabled;
        return (
            <div>
                {!disabled &amp;&amp; props.view.sortable &amp;&amp; }
                <span>
                    {props.child}</span></div></span>

let Handle = null;

    if (this.moveable) {
      Handle = SortableHandle(() => (
        <svg height="10px"> {}}
          style={this.getMoveImgStyle()}
          width="10px"
        &gt;
          
        </svg>
      ));
    } else {
      Handle = SortableHandle(() =&gt; <div>);
    }

    return (
      <div style="{{"></div></div>

const { __ } = wp.i18n;

const {
	IconButton,
	TextControl,
	SelectControl,
	ToggleControl
} = wp.components;

const {
	Fragment,
	useState
} = wp.element;

const DragHandle = SortableHandle( () => {
	return (
		<div>
			<span></span>
		</div>
	);
});

export const SortableItem = ({
	value,
	disabled,
	getFields,
	toggleFields,
	imageSize,
	titleTag,
	excerptLimit
}) =&gt; {