React +using html drag not getting event value on different components

Am new to react , so was just introducing drag and drop functionalities in react components.

Here am dragging components from leftPanelComponent and and dropping to RightPanelComponent , meaning both are different components in react. so am not getting event value on RightPanelComponent on Drop function

In LeftPanelComponent ,

<div draggable='true' className='name' onDragStart={dragStartHandler.bind(this)}>
    {propertyName(name, 10, 4)}
</div>

const dragStartHandler = (ev) => {
  console.log('react SyntheticEvent ==> ', ev);
  console.log('nativeEvent ==> ', ev.nativeEvent);
  ev.dataTransfer.setData('Text', ev);
  console.log(ev);

Here am not getting the element value inside ev ( like ev.currentTraget)

Also in my RightPanelComponent am just writing drop function like

<div className='wrapper-div' onDrop={(e) => this.drop(e)} onDragOver={(e) => this.allowDrop(e)}>
//some code

</div>

Here also am not receiving the drop value . Some how i need to get the dragged value

drop = (ev) => {
    if (ev != undefined) {
      var data = ev.dataTransfer.getData('Text'); --> not getting value
      ev.target.appendChild(document.getElementById(data));
      ev.preventDefault();
    }
  };

  allowDrop = (ev) => {
    if (ev != undefined) {
      ev.preventDefault();
    }
  };

Is this the right way to do the same in react , since i can see in UI , element is getting dragged with + sign when it enter on drop area

But am not getting event value on Drop function in RightPanelComponent.(its getting undefined) Am i missing something , please correct me if am wrong