React-dnd: Simple dragSource is not dragging

[drzhbe]

I've tried the simplest example, used DragSource on the target and DragDropContext on the parent, but the BOX is not dragging. What am I doing wrong?

import React from 'react';

import { DragSource } from 'react-dnd';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd/modules/backends/HTML5';

var cardSource = {
    beginDrag: function(props) {
        return {};
    }
};

function collect(connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()
    }
}

var Box = DragSource('box', cardSource, collect)(React.createClass({
    render: function() {
        return (<div>BOX</div>);
    }
}));

var App = DragDropContext(HTML5Backend)(React.createClass({
    render: function() {
        return (<div><Box /></div>);
    }
}));

React.render(
    <App />,
    document.getElementById('container')
);

[drzhbe]

Okay, I found it :)
Should use this.props.connectDragSource in Boxs render to render the draggable content

...
var Box = DragSource('box', cardSource, collect)(React.createClass({
    render: function() {
        var connectDragSource = this.props.connectDragSource;
        return connectDragSource(<div>BBB</div>);
    }
}));
...