Проблемы с перетаскиванием элемента React при изменении события dataTransfer

Question

Я пытаюсь изменить содержимое внутри события DragStart.Когда элемент освобождается в дом вставляется и то, что я хочу, и другой диапазон, который я не могу удалить.Кажется, это происходит только с последней версией Chrome.Safari и Firefox ведут себя по-другому.

Я знаю, что это неправильное использование React.Я попытался воссоздать более или менее то, что мне нужно в этой скрипке, вы можете видеть, что при перетаскивании слова «тест» и его отпускании выбрасывается два отрезка: один - это то, что я вставил в событие, а другой - то, что я не могу заблокировать.

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/