react-dnd - React DnD は、ドラッグ時にのみ div スタイルを変更します

Question

ライブラリを使用してドラッグ アンド ドロップ メカニズムを実装していますreact-dndが、ドロップ ターゲットのスタイルを設定するのが難しいと感じています。ドロップできるドロップターゲットをユーザーに表示したいのですが、 and を使用するisOverと、canDrop現在ホバーされているアイテムのみがスタイル設定されます。
この値を使用する!isOverと、要素をドラッグしなくても、すべての div がスタイル設定されます。要素のドラッグが発生したときにのみ
、ドロップ ターゲットのスタイルを設定するにはどうすればよいですか? これは、これまでの私のコードです。
@DropTarget

import React from 'react';
import {DropTarget} from 'react-dnd';
import {ItemTypes} from './Constants';

const target = {
    drop(props, monitor, component){
        // console.log("Dropped on", props.id);
    },

    canDrop(props, monitor, component){
        var cardColumn = monitor.getItem().column;
        var targetColumn = props.column;
        return false; // still testing styling when only an element is being dragged on the page
    }

};

@DropTarget(ItemTypes.CARD, target, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver({shallow: true}),
    canDrop: monitor.canDrop(),
}))
class CardList extends React.Component{
    constructor(props){
        super(props);

        this.addClass = this.addClass.bind(this);
    }

    addClass(){
        const {isOver, canDrop} = this.props;
        if(isOver && canDrop){
            return "willDrop"; // green background for .card-list
        }
        if(isOver && !canDrop){
            return "noDrop"; // red background for .card-list
        }
        if(!isOver && !canDrop){
            return ""; // will style all the backgrounds in a color, but not when dragging
        }

    }

    render(){
        const {connectDropTarget} = this.props;

        return connectDropTarget(
            <div class={"card-list col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " + this.addClass()} id={this.props.id}>
                {this.props.children}
            </div>
        );
    }
}

export default CardList;

isDragging要素がページ上でドラッグされているときに値を取得する方法はありますか?これが私が望むものを取得する唯一の可能性であるためです。
ありがとう！