How to use the react-dnd-html5-backend.NativeTypes.FILE function in react-dnd-html5-backend

export function connectDnD(
  Comp: React.ComponentType
) {
  return DropTarget<
    {
      index: number
      moveRow: (from: number, to: number) => void
      insert: (index: number, data: DocumentState) => void
      plugins: Record
    },
    TargetProps
  >(
    ['row', NativeTypes.FILE, NativeTypes.URL],
    {
      hover(props, monitor, component) {
        if (!component) {
          return null
        }
        const node = component.getNode()
        if (!node) {
          return null
        }
        // set the boundingRect for later use (see isDraggingAbove)
        monitor.getItem().boundingRect = node.getBoundingClientRect()

        if (monitor.getItemType() === 'row') {
          const dragIndex = monitor.getItem().index
          const hoverIndex = props.index
          if (dragIndex === hoverIndex) {

const Container: React.FC = () => {
  const [dustbins, setDustbins] = useState([
    { accepts: [ItemTypes.GLASS], lastDroppedItem: null },
    { accepts: [ItemTypes.FOOD], lastDroppedItem: null },
    {
      accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL],
      lastDroppedItem: null,
    },
    { accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null },
  ])
  const [boxes, setBoxes] = useState([
    { name: 'Bottle', type: ItemTypes.GLASS },
    { name: 'Banana', type: ItemTypes.FOOD },
    { name: 'Magazine', type: ItemTypes.PAPER },
  ])
  const [droppedBoxNames, setDroppedBoxNames] = useState([])

  useEffect(() => {
    const interval = setInterval(() => {
      setBoxes(shuffle(boxes))
      setDustbins(shuffle(dustbins))
    }, 1000)
    return () => clearInterval(interval)
  })

const Container = () => {
  const [dustbins, setDustbins] = useState([
    { accepts: [ItemTypes.GLASS], lastDroppedItem: null },
    { accepts: [ItemTypes.FOOD], lastDroppedItem: null },
    {
      accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL],
      lastDroppedItem: null,
    },
    { accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null },
  ])
  const [boxes] = useState([
    { name: 'Bottle', type: ItemTypes.GLASS },
    { name: 'Banana', type: ItemTypes.FOOD },
    { name: 'Magazine', type: ItemTypes.PAPER },
  ])
  const [droppedBoxNames, setDroppedBoxNames] = useState([])
  function isDropped(boxName) {
    return droppedBoxNames.indexOf(boxName) > -1
  }
  const handleDrop = useCallback(
    (index, item) => {
      const { name } = item
      setDroppedBoxNames(
        update(droppedBoxNames, name ? { $push: [name] } : { $push: [] }),
      )

const Container: React.FC = () => {
  const [dustbins, setDustbins] = useState([
    { accepts: [ItemTypes.GLASS], lastDroppedItem: null },
    { accepts: [ItemTypes.FOOD], lastDroppedItem: null },
    {
      accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL],
      lastDroppedItem: null,
    },
    { accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null },
  ])

  const [boxes] = useState([
    { name: 'Bottle', type: ItemTypes.GLASS },
    { name: 'Banana', type: ItemTypes.FOOD },
    { name: 'Magazine', type: ItemTypes.PAPER },
  ])

  const [droppedBoxNames, setDroppedBoxNames] = useState([])

  function isDropped(boxName: string) {
    return droppedBoxNames.indexOf(boxName) > -1
  }

  const handleDrop = useCallback(
    (index: number, item: { name: string }) => {

export const EditorView = ({ spacing }: EditorViewProps) => {
    const dispatch = useDispatch();
    const selectedDiagramId = useStore(s => getDiagramId(s));
    const editor = useStore(s => getEditor(s));
    const editorSize = editor.size;
    const zoom = useStore(s => s.ui.zoom);
    const zoomedWidth = editorSize.x * zoom;
    const zoomedHeight = editorSize.y * zoom;
    const renderer = React.useContext(RendererContext);

    const ref = React.useRef();

    const [, drop] = useDrop({
        accept: [
            NativeTypes.URL,
            NativeTypes.FILE,
            NativeTypes.TEXT,
            'DND_ASSET',
            'DND_ICON'
        ],
        drop: (item: any, monitor: DropTargetMonitor) => {
            if (!monitor || !ref.current) {
                return;
            }

            const offset = monitor.getSourceClientOffset() || monitor.getClientOffset()!;

            const componentRect = (findDOMNode(ref.current) as HTMLElement)!.getBoundingClientRect();

            let x = (offset.x - spacing - componentRect.left) / zoom;
            let y = (offset.y - spacing - componentRect.top) / zoom;

<div style="{{">
            {draggable}
          </div>
        
        
        
      
    )

    return this.connectDND(folder)
  }
}

@DragSource('folder', BaseFolderConnectors.dragSource, BaseFolderConnectors.dragCollect)
@DropTarget(
  ['file', 'folder', NativeTypes.FILE],
  BaseFileConnectors.targetSource,
  BaseFileConnectors.targetCollect,
)
class TableFolder extends RawTableFolder {}

export default TableFolder
export { RawTableFolder }

const TargetBox: React.FC = props => {
  const { onDrop } = props
  const [{ canDrop, isOver }, drop] = useDrop({
    accept: [NativeTypes.FILE],
    drop(item, monitor) {
      if (onDrop) {
        onDrop(props, monitor)
      }
    },
    collect: monitor => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  })

  const isActive = canDrop && isOver
  return (
    <div style="{style}">
      {isActive ? 'Release to drop' : 'Drag file here'}
    </div>

{typeof this.props.modified === 'undefined' ? '-' : this.props.modified}
        
      
    );

    return this.connectDND(row);
  }
}

export default DragSource(
  'file',
  BaseFileConnectors.dragSource,
  BaseFileConnectors.dragCollect
)(
  DropTarget(
    ['file', 'folder', NativeTypes.FILE],
    BaseFileConnectors.targetSource,
    BaseFileConnectors.targetCollect
  )(
    TableFile
  )
);

export default ({
  children,
  onSelectFile,
  acceptedDropTypes,
  disableClick,
  showFileSelectButton,
  ...props
}: PropsT) => {
  const fileInputRef = React.useRef(null);

  const dropTypes = [...(acceptedDropTypes || []), NativeTypes.FILE];

  function onOpenFileDialog() {
    fileInputRef.current.click();
  }

  return (
     {
        if (disableClick) return;

        onOpenFileDialog();
      }}
      {...props}
    >
      {showFileSelectButton && (