React拖拽排序后出现Ghost残影及删除按钮消失问题

将元素/图片从position x拖拽到position y后，元素虽能停留在新位置，但在drop handler阶段会出现一个"幽灵"区域试图回到旧位置，同时覆盖层上的删除按钮消失。重排功能本身可正常运行，但位置切换的表现不符合预期。

状态对比 #

• 异常状态：
  
• 正常状态：
  

已尝试的解决方案 #

• 添加了多个拖拽相关事件处理函数：onDragOver、onDragDrop、onDragStart、onDragEnter、onDragLeave
• 尝试添加逻辑缓解图片过渡问题，但均未生效

组件代码片段 #

{imageList.map((image, index, isDragging) => (
                <div
                  key={index}
                  className="image-item w-1/2 sm:w-40 h-36 sm:p-2 px-1 pt-2"
                  draggable
                  onDragStart={(e) => handleDragStart(e, index)}
                  onDragEnd={(e) => handleDragEnd(e)}
                  onDragEnter={(e) => handleDragEnter(e, index)}
                  onDragLeave={(e) => handleDragLeave(e)}
                  onDragOver={(e) => handleDragOver(e, index)}
                  onDrop={(e) => handleDrop(e, index)}
                >
                  <div
                    className={`border relative bg-white h-full transition duration-200 ease-in-out `}
                  >
                    {/* //!IMAGE */}
                    <span
                      className={` w-full h-full bg-center bg-contain bg-no-repeat `}
                      style={
                        {
                          // backgroundImage: `url(${image.dataURL})`
                        }
                      }
                    >
                      <img src={image.dataURL} width="200" alt="" />
                    </span>
                    {/* OVERLAY */}
                    <div className="z-10 overlay absolute w-full h-full flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50">
                      <div className="flex">
                        <button
                          type="button"
                          onClick={() => onImageRemove(index)}
                          title=""
                        >
                          <span className="w-5 h-5">
                            <button>delete</button>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}

内容的提问来源于stack exchange，提问作者Petrit