Отбрасывание компонента внутри вложенных объектов-мишеней дает ошибку

Question

Вот мой класс контейнеров

Код в песочнице

`import React, { Component } from "react";
import { DropTarget } from "react-dnd";
import Box from "./Box";

class Container extends Component {
  state = {
    Boxes: [
      { left: 60, top: 30, text: "ITEM_1" },
      { left: 100, top: 70, text: "ITEM_2" }
    ]
  };
  render() {
    const { connectDropTarget } = this.props;
    return connectDropTarget(
      <div
        className="container"
        style={{ width: "100%", height: "100vh", background: "yellow" }}
      >
        {this.state.Boxes.map((box, index) => {
          return (
            <Box
              id={index}
              key={index}
              left={box.left}
              top={box.top}
              text={box.text}
              moveBox={this.moveBox}
            />
          );
        })}
      </div>
    );
  }
  moveBox(id, left, top) {
    const allBoxes = this.state.Boxes;
    const singleBox = this.state.Boxes[id];
    singleBox.left = left;
    singleBox.top = top;
    const newBox = allBoxes.filter((box, index) => index !== id);
    newBox.push(singleBox);
    this.setState({ Boxes: newBox });
  }
}

export default DropTarget(
  "items",
  {
    // Spec Object Started
    drop(props, monitor, component) {
      const item = monitor.getItem();
      const delta = monitor.getDifferenceFromInitialOffset();
      const left = Math.round(item.left + delta.x);
      const top = Math.round(item.top + delta.y);
      component.moveBox(item.id, left, top);
    }
  }, //Spec Oject Ended Here
  (connect, monitor) => ({
    connectDropTarget: connect.dropTarget()
  })
)(Container);
`

А вот и мой класс Box

import React, { Component } from "react";
import { DragSource, DropTarget } from "react-dnd";
import flow from "lodash/flow";
let whichDragging = "items";
class Box extends Component {
  state = {};
  render() {
    const { left, top, text, connectDragSouce, connectDropTarget } = this.props;
    return connectDragSouce(
      connectDropTarget(
        <div
          style={{
            width: "20%",
            border: "2px dotted black",
            margin: "auto",
            position: "relative",
            top: top,
            left: left
          }}
        >
          {text}
        </div>
      )
    );
  }
}

export default flow(
  DragSource(
    whichDragging,
    {
      beginDrag(props, monitor, component) {
        console.log(component);
        const { left, top, text, id } = props;
        return {
          left,
          top,
          text,
          id
        };
      }
    },
    (connect, monitor) => ({
      connectDragSouce: connect.dragSource()
    })
  ),
  DropTarget(
    whichDragging,
    {
      drop(props, monitor, component) {
        whichDragging = "nested";
        const item = monitor.getItem();
        const delta = monitor.getDifferenceFromInitialOffset();
        const left = Math.round(item.left + delta.x);
        const top = Math.round(item.top + delta.y);

        console.log("Logging");
        console.log(component);
        // whichDragging = "items";
      }
    },
    (connect, monitor) => ({
      connectDropTarget: connect.dropTarget()
    })
  )
)(Box);

Простое перетаскивание. Работает нормально, но когда я перетаскиваю item_1 поверх item_2 или наоборот, я получаю ошибку, и мой Компонент в выпадающем меню показывает DragDropContainer в console.log Я хочу получить id | ключ компонента, над которым один компонент удален, а не в состоянии найти любое решение, так как за 2 дня любая помощь будет оценена.