Drag and Drop. Сброс перенесенных элементов на исходные позиции

Как сбросить элементы на исходные позиции после их переноса из одной зоны в другую? Код на TypeScript, используется фреймворк React.

import React from 'react';//импорт React

//компонент Main
export function Main() {

  //функция, срабатывающая при перемещении над допустимой зоной переноса
  function allowDrop(event: any){
    event.preventDefault();
  }

  //функция, срабатывающая при начале перемещения
  function drag(event: any){
    event.dataTransfer.setData('id', event.target.id);
  }

  //функция, срабатываемая при падении на цель перетаскивания
  function drop(event: any){
    event.target.append(
      document.getElementById(
        event.dataTransfer.getData('id')
      )
    )
  }

  //функция сброса перенесенных элементов на исходные позиции
  function Reset(){
    //здесь планируется написать код, решающий данную проблему
  }

   /*drop-zone1 - зона переноса,
     drag-zone1 - зона из которой происходит перенос,
     pl1, pl2 - переносимые элементы,
     reset - кнопка сброса перенесенных элементов на исходные позиции*/
   return (
     <div>

        <div className='drop-zone1' id='drop-zone1' onDragOver={allowDrop} onDrop={drop}></div>

        <div className='drag-zone1' id='drag-zone1' onDragOver={allowDrop} onDrop={drop}>
          <div className='pl1' id='pl1' draggable='true' onDragStart={drag}>Подшипник</div>
          <div className='pl2' id='pl2' draggable='true' onDragStart={drag}>Вал</div>
        </div>

        <button className='reset' id='reset' onClick={Reset}>Сброс</button>

     </div>
   );
}

export default Main;

Пытался до перемещения элементов сохранить HTML-код в переменную и использовать ее при нажатии кнопки сброса, но не смог решить проблему. Пробовал через стейты, но из-за этого потом не могу менять CSS-свойства элементов через JavaScript.