Building drag and drop components "recursively" using React and react dnd

Question

I tried using the react dnd and want to get it working on a recursively built component. But I am stuck and the drag is being attached to the last child component alone, making all the other components as draggable:"false". Below is a code sample similar to what I exactly need -

@DragSource(Types.ASSET, assetSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource()
}))
class DragItem extends React.Component {
    render() {
        const { connectDragSource, name, children } = this.props;
        return connectDragSource(
            { name }
    {
                children == undefined  ?
                    " : (
    {
                children.map(function (name) {
                    return ();
                })
            }
        )
    }
    );
}