当列表项在compose中可拖动时，如何通过拖动打开导航抽屉？

import React, { useState } from 'react';
import { DragSource, DropTarget } from 'react-dnd';

// 列表项组件
const ListItem = ({ connectDragSource, connectDropTarget, isDragging, isOver, item }) => {
  const opacity = isDragging ? 0.5 : 1;
  const backgroundColor = isOver ? 'lightblue' : 'white';

  return connectDragSource(
    connectDropTarget(
      <div style={{ opacity, backgroundColor }}>
        {item.name}
      </div>
    )
  );
};

// 导航抽屉组件
const NavigationDrawer = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleToggleDrawer = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <button onClick={handleToggleDrawer}>Toggle Drawer</button>
      {isOpen && (
        <div>
          Drawer Content
        </div>
      )}
    </div>
  );
};

// 使用react-dnd库包装列表项组件，使其可拖动
const DraggableListItem = DragSource(
  'listItem',
  {
    beginDrag: (props) => ({ item: props.item }),
  },
  (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
  })
)(ListItem);

// 使用react-dnd库包装列表项组件，使其可接收拖放
const DroppableListItem = DropTarget(
  'listItem',
  {
    drop: (props, monitor) => {
      const { item } = monitor.getItem();
      const didDrop = monitor.didDrop();
      if (!didDrop) {
        // 检查拖动的位置是否在导航抽屉的打开触发区域内
        // 如果是，则更新导航抽屉的状态为打开
        const dropZoneRect = document.getElementById('dropZone').getBoundingClientRect();
        const { x, y } = monitor.getClientOffset();
        if (x >= dropZoneRect.left && x <= dropZoneRect.right && y >= dropZoneRect.top && y <= dropZoneRect.bottom) {
          props.openDrawer();
        }
      }
    },
  },
  (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
  })
)(DraggableListItem);

// 组合列表项和导航抽屉组件
const App = () => {
  const handleOpenDrawer = () => {
    // 更新导航抽屉的状态为打开
  };

  return (
    <div>
      <DroppableListItem item={{ name: 'Item 1' }} openDrawer={handleOpenDrawer} />
      <DroppableListItem item={{ name: 'Item 2' }} openDrawer={handleOpenDrawer} />
      <DroppableListItem item={{ name: 'Item 3' }} openDrawer={handleOpenDrawer} />
      <div id="dropZone">Drop Zone</div>
      <NavigationDrawer />
    </div>
  );
};

export default App;