title: Dropping Over a Component inside nested Drop Targets giving error
body: <p>Here is my Container Class </p>
  
  <p><a href="https://codesandbox.io/embed/r3xql2m8o" rel="nofollow noreferrer">Code on Sandbox</a></p>
  
  <pre><code>`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(
        &lt;div
          className="container"
          style={{ width: "100%", height: "100vh", background: "yellow" }}
        &gt;
          {this.state.Boxes.map((box, index) =&gt; {
            return (
              &lt;Box
                id={index}
                key={index}
                left={box.left}
                top={box.top}
                text={box.text}
                moveBox={this.moveBox}
              /&gt;
            );
          })}
        &lt;/div&gt;
      );
    }
    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) =&gt; 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) =&gt; ({
      connectDropTarget: connect.dropTarget()
    })
  )(Container);
  `
  </code></pre>
  
  <p>And Here is my Box Class</p>
  
  <pre><code>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(
          &lt;div
            style={{
              width: "20%",
              border: "2px dotted black",
              margin: "auto",
              position: "relative",
              top: top,
              left: left
            }}
          &gt;
            {text}
          &lt;/div&gt;
        )
      );
    }
  }
  
  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) =&gt; ({
        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) =&gt; ({
        connectDropTarget: connect.dropTarget()
      })
    )
  )(Box);
  </code></pre>
  
  <p>Simple Dragging Dropping Working fine but when i drop item_1 over item_2 or vice versa i got error and my Component in drop shows DragDropContainer in <code>console.log</code> i want to get the id|key of component over which one component is dropped and not able to find any solution since 2 days any help will be appriciated. </p>