Реагировать на цель DnD зависания и падение никогда не вызывается

Question

У меня проблемы с получением событий зависания и отбрасывания. Сейчас похоже, что ничего не происходит, или он будет пытаться перетащить, но перетаскивание никогда не заканчивается, пока не будет вызван beginDrag. Я попытался добавить индекс к экземпляру, и я пытался изменить то, что возвращается на beginDrag, но я не смог заставить что-либо работать. У кого-нибудь есть мысли? Благодарю.

Версии, на которых я нахожусь: "response-dnd": "2.6.0", "Reaction-dnd-html5-backend": "2.6.0",

Мой компонент

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import { DragSource, DropTarget } from 'react-dnd';
import DropTypes from '../utils/DropTypes';
import ColumnFieldTypes from '../utils/ColumnFieldTypes';

const cardSource = {
    beginDrag(props) {
        console.log(props)
        return props.card
    },
    endDrag : function () {
      console.log('endDrag');
    }
}

const cardTarget = {
    canDrop(props, monitor) {
        const item = monitor.getItem();
        return item ? true : false;
        // this gets called, however
    },

    hover: function (props, monitor, component) {
        console.log('hover');
        // not getting called!
    },

    drop : function (props) {
        console.log('drop');
        return props.card;
        // not getting called either!
    }
}

@DropTarget(DropTypes.CARD, cardTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    isOverCurrent: monitor.isOver({ shallow: true }),
    canDrop: monitor.canDrop(),
    itemType: monitor.getItemType()
}))
@DragSource(DropTypes.CARD, cardSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
}))

export class CardDragDrop extends Component {
    props: {
        connectDragSource: func,
        connectDropTarget: func,
        isDragging: bool,
    };

    constructor(props) {
        super(props);
    }

    render() {
        const { 
            card,
            connectDragSource,
            connectDropTarget,
            isDragging,
        } = this.props;
        const cardOpacity = isDragging ? 0 : 1;

        return connectDragSource(
            connectDropTarget(
                this.props.children
            )
        )
    }
}

родительский компонент:

@DragDropContext(HTML5Backend)
  export class ConfigurableStatusSelector extends Component {

   constructor(props) {
        super(props);

        this.state = {
            selections: []
        };
    }

   render() {
     return (
       <div>
    { selections.map((card, index) => {
       return (
           <CardDragDrop 
             key={`${card.ID}-status-card-${index}`} 
             card={card}
             moveCard={this.moveCard}
           >
              <div>
                 <StatusCard
                     card={card} 
                 />
             </div>
          </CardDragDrop>
        )     
     }) : null }
     </div>
    )}