Drag and Drop React

Boa tarde, Estou tentando aprender a fazer uma tela onde o usuário poderia escolher a posição que ele prefere na tela para cada gráfico.

Pesquisando achei o Drag and Drop porem não estou conseguindo implementá-lo, estou usando como base a própria API. https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

O código esta assim:

import React from 'react';

export default class App extends React.Component {
  dragover_handler = (ev) => {
    ev.preventDefault();
    // Set the dropEffect to move
    ev.dataTransfer.dropEffect = "move"
   }

   drop_handler = (ev) => {
    ev.preventDefault();
    // Get the id of the target and add the moved element to the target's DOM
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
   }

  dragstart_handler = (ev) => {
    console.log("dragStart");
    // Add the target element's id to the data transfer object
    ev.dataTransfer.setData("text/plain", ev.target.id);
    ev.dataTransfer.setData("text/plain", ev.target.id);
    ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
    ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
    ev.dataTransfer.dropEffect = "copy";
  }

  render() {
    return (
      <div>

        <div>
          <p id="p1" draggable="true" ondragstart={this.dragstart_handler}>This element is draggable.</p>
        </div>

     <div id="target" ondrop={this.drop_handler} ondragover={this.dragover_handler}>Drop Zone</div>

      </div>
    );
  }
}