How to make accordion (mui) work with dndKit in react.js

Question

我有一个问题，我有一个手风琴组件，里面有子手风琴，里面有文本。我需要让每个手风琴在各自的区域内可排序。现在的问题是我让它可以排序了。手风琴将不再打开，因为当我单击时，它会注册为 onDrag 事件。有人知道怎么修这个东西吗？或者知道我是否可以用另一个库来实现它（react-beautiful-dnd 不在问题之列）

代码：

const [modules, setModules] = useState(programData?.modules);
  

  function handleDragEnd(event) {
    console.log('Drag end: ', event)
    const {active, over} = event;

    if (active.id !== over.id) {
      setProgramData((data) => {
        const activeIndex = data.modules.findIndex((m) => m.id === active.id);
        const overIndex = data.modules.findIndex((m) => m.id === over.id);
  
        const newModules = [...data.modules];
        newModules.splice(overIndex, 0, newModules.splice(activeIndex, 1)[0]);
  
        return {
          ...data,
          modules: newModules,
        };
      });
    }
  } 

return (
            <Box sx={{ mt: 4 }}>
              
              {programData.name ? 
              (
            <DndContext
              collisionDetection={closestCenter}
              onDragEnd={handleDragEnd}
 
            >
              <Box className="p-3" style={{"width": "100%"}} align="center">
                <SortableContext
                  items={programData.modules}
                  strategy={verticalListSortingStrategy}
                >
                  {programData?.modules?.map(module => <SortableItem type ="module" key={module.id} id={module.id} programData= {programData}/>)}
                </SortableContext>
              </Box>
            </DndContext>
              )
              : 
              (
                <Typography variant="h6">No Modules</Typography>
              )}
            </Box>

)

可排序项目：

export function SortableItem(props) {
    // props.id
    // JavaScript
    var data = props.programData.modules.find(module => module.id === props.id);
    const type= props.type
    const {
      attributes,
      listeners,
      setNodeRef,
      transform,
      transition,
      dragHandleProps
    } = useSortable({
      id: props.id,
      delay: 500,
      coordinates: sortableKeyboardCoordinates,
      dragHandleProps: { onTouchStart: (e) => e.preventDefault() }
    });

    const style = {
        transform: CSS.Transform.toString(transform),
        transition
    }

    switch(props.type){
        case "module":
            data = props.programData.modules.find(module => module.id === props.id);
    }
  
  
    return (
      <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
        {type === "module" &&
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
            {data.name}
          </AccordionSummary>
          <AccordionDetails>
            <List>
              {data.sessions.map((session, index) => (
                <ListItem key={index}>
                  <ListItemText primary={session.name} />
                </ListItem>
              ))}
            </List>
          </AccordionDetails>
        </Accordion>
        }

      </div>
    );