How to drag input field in react?

Question

I am trying to make same thing in react (my own custom plugin) same like this https://formbuilder.online/

I want to know how I will drag text field in dropable area.

Here is my code https://codesandbox.io/s/blissful-elbakyan-4r7bb

I don’t want to use any form builder plugin as I am making my own custom plugin

function App() {
  const onDrop = data => {
    console.log(data);
    // => banana
  };
  return (
    <div className="App">
      <div>
        <ul>
          <Draggable type="fruit" data="banana">
            <li>Text field</li>
          </Draggable>
          <Draggable type="fruit" data="apple">
            <li>Select Box</li>
          </Draggable>
        </ul>
        <Droppable
          style={{ border: "1px solid", height: 400 }}
          types={["fruit"]} // <= allowed drop types
          onDrop={onDrop}
        >
          <ul className="Smoothie" />
        </Droppable>
      </div>
    </div>
  );
}