react dnd中的项目类型存在问题(不变冲突:必须定义项目类型)

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

// 定义拖拽源组件
const DragSource = () => {
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'myType' }, // 定义项目类型为'myType'
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  });

  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      拖拽源组件
    </div>
  );
};

// 定义放置目标组件
const DropTarget = () => {
  const [{ isOver }, drop] = useDrop({
    accept: 'myType', // 只接受项目类型为'myType'的拖拽项
    collect: monitor => ({
      isOver: monitor.isOver(),
    }),
    drop: (item) => {
      // 处理放置行为
      console.log('拖拽项被放置');
      console.log('拖拽项类型:', item.type);
    },
  });

  return (
    <div ref={drop} style={{ backgroundColor: isOver ? 'yellow' : 'white' }}>
      放置目标组件
    </div>
  );
};

// 使用示例
const App = () => {
  return (
    <div>
      <DragSource />
      <DropTarget />
    </div>
  );
};