如何在使用react-beautiful dnd删除元素后保持适当的间距？

onDragEnd = (result) => {
  const { source, destination } = result;
  if (!destination) {
    // 元素被删除
    const deletedItemId = this.state.items[source.index].id;
    // 执行删除操作
    this.deleteItem(deletedItemId);
  }
};

deleteItem = (deletedItemId) => {
  const deletedItem = document.getElementById(deletedItemId);
  const deletedItemRect = deletedItem.getBoundingClientRect();
  // 保存被删除元素的位置和尺寸信息
  this.setState({ deletedItemRect });
  // 执行删除操作
  // ...
};

updateRemainingItems = () => {
  const remainingItems = document.getElementsByClassName('item');
  const remainingItemsRect = Array.from(remainingItems).map((item) =>
    item.getBoundingClientRect()
  );
  // 保存剩余元素的位置和尺寸信息
  this.setState({ remainingItemsRect });
};

applySpacing = () => {
  const { deletedItemRect, remainingItemsRect } = this.state;
  const spacing = 10; // 设置间距大小

  // 计算间距
  const topSpacing = deletedItemRect.top - remainingItemsRect[0].top;
  const leftSpacing = deletedItemRect.left - remainingItemsRect[0].left;

  // 应用间距
  Array.from(remainingItems).forEach((item, index) => {
    item.style.transform = `translate(${leftSpacing}px, ${topSpacing}px)`;
    topSpacing += remainingItemsRect[index].height + spacing;
  });
};