Simple tree-view with react-dnd

Question

I'm attempting to create a simple tree-view React component with DnD enabled by react-dnd framework(?). I tried react-sortable-tree, but ditched it for reasons I can't remember now (had to customize it, but the code is too complicated for me). So far, I've got two main components: tree node itself and drop overlay consisting of two div's for dropping before and after. The node is coded as follows:

class Node extends Component {
    ....

    render() {
        const {
            data,
            depth,
            is_group,
            connectDragSource
        } = this.props;
        ...
        for (let kid_id of kids)
                childElements.push(
                    <ConnectedQuestionNode
                        id={kid_id}
                        is_group={areChildrenGroups}
                        depth={depth + 1}
                        key={kid_id}
                    />);
         return (
            <Fragment>
                {connectDragSource(<div
                    className="tree-row"
                    style = {{ left: treeBlockIndent * depth + 'px' }}
                >
                    {prefix}
                    <div className="tree-row-title">
                        {data.title}
                    </div>
                    <DropOverlay
                        id={data.id}
                        nodeIsGroup={is_group}
                        nodeHasSubgroups={hasSubgroups}
                        moveActionCreator={moveQuestion}
                        moveGroupActionCreator={moveQuestionGroup}
                        nodeItemType={ItemTypes.QUESTION_NODE}
                    />
                </div>)}
                {childElements}
            </Fragment>
        );
    }
}

Afterwards it is connected into ConnectedQuestionNode (not relevant here). Here's DropOverlay:

class _DropOverlayHalf extends Component {
    render() {
        const cls = 
            "drop-overlay"
            + (this.props.isTop ?
                " top" : " bottom")
            + (this.props.isOver ? 
                " over" : " not-over")
            + (this.props.canDrop ?
                " can-drop" : " cant-drop");
        return this.props.connectDropTarget(<div className={cls}/>);
    }
}

const DropOverlayHalf = DropTarget(props => props.nodeItemType, dropTargetSpec, collect)(_DropOverlayHalf);

class _DropOverlay extends Component {
    render() {
        return <Fragment>
            <DropOverlayHalf
                {...this.props}
                isTop={true}/>
            <DropOverlayHalf
                {...this.props}
                isTop={false}/>
        </Fragment>
    }
};

const DropOverlay = connect(null, dispatch => ({ dispatch }))(_DropOverlay);

collect and dropTargetSpec are nothing unusual. The tree renders normally, but 'canDrop' event of react-dnd somehow fires on hover for every currently rendered DropOverlayHalf. Moreover, monitor.isOver() always returns false. I'm at a loss how to approach this. Maybe I'm gonna try and rewrite it so that everything is nested instead of the indented list that I currently have. Hope some wild React guru appears and points me in the right direction :)

Update: hover is not firing at all, which means the issue is monitor.isOver().