Drag and Drop React element problems modifying event dataTransfer

Question

I'm trying to modify the content inside the DragStart event. When the element is released in the dom is inserted both what I want and another span that I can not remove. It seems to be happening only with the last version of Chrome. Safari and Firefox have another behavior.

I know it's not a proper use of React. I tried to recreate more or less what I need in this fiddle, you can see that dragging the word 'test' and releasing it are dropped two spans, one is what I put in the event and another span that I can not block.

class Test extends React.Component {
    onDragEvent(e) {
      var elem = $(e.target);
      if ( elem.hasClass('drag')  ) {
        e.dataTransfer.setData('text/html', '<span contentEditable="false" class="drag">test dropped</span>');
        return false;
      } 
    }

    onDragOver(e) {
        e.preventDefault();
    }

    render() {
      return <div className="container" contentEditable="true" onDragStart={this.onDragEvent.bind(this)} >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
          <span draggable="true" contentEditable="false" className="drag">test</span>
        </div>;
    }
}

ReactDOM.render(
  <Test/>,
  document.getElementById('container')
);

https://jsfiddle.net/riccio82/nf9s8ozk/