React-DND не стреляет и падает на цель

Question

У меня проблемы с React-DND, пытающимся заставить сторону DropTarget работать.Когда я перетаскиваю DragSource, canDrop цели переходит на true, но isOver остается ложным, даже если я перетаскиваю источник.

Для DropSource у меня есть следующее:

import DropTypes from "../../common/DropTypes";

class ToolbarItem extends React.Component {
  render() {
    const { children } = this.props;

    // These two props are injected by React DnD,
    // as defined by your `collect` function above:
    const { isDragging, connectDragSource } = this.props;
    return connectDragSource(<div>{children}</div>);
  }
}

/**
 * Specifies the drag source contract.
 * Only `beginDrag` function is required.
 */
const dragSource = {
  beginDrag(props, monitor, component) {
    return {
      description: props.description
    };
  }
};

/**
 * Specifies which props to inject into your component.
 */
function dragCollect(connect, monitor) {
  return {
    // Call this function inside render()
    // to let React DnD handle the drag events:
    connectDragSource: connect.dragSource(),
    // You can ask the monitor about the current drag state:
    isDragging: monitor.isDragging()
  };
}

console.log("Source DropType: ", DropTypes.TOOLBAR_ITEM);
const DragableToolbarItem = DragSource(
  DropTypes.TOOLBAR_ITEM,
  dragSource,
  dragCollect
)(ToolbarItem);

И для DropTarget у меня есть:

import DropTypes from "../../common/DropTypes";

class TemplateEditor extends React.Component {
  componentDidMount() {}

  render() {
    console.log("props: ", this.props);
    const { isOver, canDrop } = this.props;
    return (
      <div className="h-100">
        Editor{isOver ? " - OVER!" : ""}
        {canDrop ? " - CAN DROP!" : ""}
      </div>
    );
  }
}

/**
 * Specifies the drag source contract.
 * Only `beginDrag` function is required.
 */
const dropSource = {
  drop(props, monitor, component) {
    console.log("props: ", props);
    console.log("monitor: ", monitor);
    console.log("component: ", component);
  },
  hover(props, monitor, component) {
    console.log("props: ", props);
    console.log("monitor: ", monitor);
    console.log("component: ", component);
  }
};

const dropCollector = (connect, monitor) => ({
  isOver: monitor.isOver(),
  item: monitor.getItem(),
  canDrop: monitor.canDrop()
});

// export default TemplateEditor;
console.log("Target DropType: ", DropTypes.TOOLBAR_ITEM);
export default DropTarget(DropTypes.TOOLBAR_ITEM, dropSource, dropCollector)(
  TemplateEditor
);

DropTypes - это просто const, где я настраиваю типы, чтобы убедиться, что они правильно установлены на источнике и цели:

export default {
  TOOLBAR_ITEM: 'TOOLBAR_ITEM',
};

Я гарантировал, что <div> моей цели действительно имеет размеры, так что я могу парить, поэтому я знаю, что это не проблема.