title: Issue with setState in React and React-Draggable
body: <p>I am having difficulties with the setState function in react. I am using the react-draggable package and I can drag my div around but it doesn't appear to be setting the x y coordinates when I release the mouse button, so the div just snaps back to where it was. Can someone tell me what I am doing wrong here with the onControlledDrag? Thanks!</p>
  
  <pre><code>  export class DraggableAnswer extends React.Component {
    constructor(props, context) {
      super(props, context);
  
      this.controlledPosition ={ x: -25, y: 10};
    }
    onControlledDrag(e, position) {
      console.log(position);
      const {x, y} = position;
      this.setState({
        controlledPosition: {x: x, y: y}
      });
    }
  
  
    render() {
      const dragHandlers = {onStart: this.onStart, onStop: this.onStop};    
  
      return (
        &lt;div className="draggableAnswerBlock"&gt;
              &lt;Draggable
                zIndex={100}
                position={this.controlledPosition}
                {...dragHandlers}
                onDrag={this.onControlledDrag.bind(this)}&gt;
                  &lt;div className="box"&gt;
                    Change my position
                  &lt;/div&gt;
              &lt;/Draggable&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>