Как использовать Dragon and Drop в ReactJS

Мне нужно с компонента под номером 1, с помощью Drag and Drop перетаскать элементы в второй компонент под номером 2, позицию 4.После этого когда я наведу курсор на этого элемента(в 4-ом блоке) вокруг него должны подсвечиваться эти зелёные(под номером 3) области чтобы я мог переместить этот элемент в эти области. Когда я перетаскиваю элемент(input, button, text area) из первого компонента он должен клонироватся и не исчезать визуально.