title: During drag and drop if any component hover over the current component, the current component changes it's style.. This is not happening as expected?
body: <pre><code>import React from 'react';
  import { findDOMNode } from 'react-dom';
  import { DropTarget } from 'react-dnd';
  import HTML5Backend from 'react-dnd-html5-backend';
  
  
  let newStyle = {'display':'none','left':'0px'} ;
  
  let target = {
      hover(props,monitor,component){
          newStyle.display = 'block';
          newStyle.left = monitor.getClientOffset().x-findDOMNode(component).getBoundingClientRect().left+'px';
          //The current mouse position where the "on hover indicator" is expected
  
          return;
      },
      drop(props, monitor,component) {
          newStyle.display = 'none';
          newStyle.left = '0px';
          return props;
      }
  }
  
  function collect(connect, monitor) {
      return {
          connectDropTarget: connect.dropTarget(),
      };
  }
  
  class component extends React.Component { 
      constructor(props){
          super(props);
      }
  
      render = () =&gt; { 
          const { connectDropTarget } = this.props;
          return connectDropTarget(
              &lt;div&gt;
                &lt;Span style = { newStyle }&gt; On hover indicator &lt;/span&gt;
                // here another component drops wrapped within div!
              &lt;/div&gt;
          )
      }
  }
  
  export default DropTarget('type', target, collect)(component);
  </code></pre>
  
  <p>In hover callback if I log my left property of newStyle object it displays the current mouse position as expected but it does not change the style of the span in the render method.</p>
  
  <p>Any help would be appreciated. Thanks in advance.</p>