ReactDnd拖动预览-查找正确的图案

import React from 'react';
import { useDrag, useDrop, DragPreviewImage } from 'react-dnd';

const ItemTypes = {
  BOX: 'box',
};

const Box = ({ name, image }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.BOX, name },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [, drop] = useDrop({
    accept: ItemTypes.BOX,
    drop: () => ({ name }),
  });

  return (
    <>
      <DragPreviewImage src={image} />
      <div
        ref={drag}
        style={{
          opacity: isDragging ? 0.5 : 1,
          cursor: 'move',
        }}
      >
        {name}
      </div>
    </>
  );
};

const App = () => {
  return (
    <div>
      <Box name="Box 1" image="box1.png" />
      <Box name="Box 2" image="box2.png" />
      <Box name="Box 3" image="box3.png" />
    </div>
  );
};

export default App;