Reactjs 如何交换两张卡而不改变其他卡的位置

我有类似这样的网格形式的图像

我很清楚react dnd，它使用悬停来获得位置并相应地交换

我想要什么

：用4交换1，用1交换4

正在发生的事情：

当移动图像1时，我将其从2和3悬停，因此中间的图像在这里交换

我已经修改了moveCard功能以符合我的要求

const moveCard = useCallback((dragIndex, hoverIndex) => {
      const dragCard = cards;
      [dragCard[dragIndex], dragCard[hoverIndex]] = [
        dragCard[hoverIndex],
        dragCard[dragIndex]
      ];
      setCards([...dragCard]);
    });

任何帮助都将不胜感激。 我只想交换我正在拖放的两个图像，其余的图像不应该改变它们的位置