React JS предотвратить нажатие на кнопку при drag n drop

В моем проекте на экран выводится множество таблиц, на заголовок таблицы навешано событие, открывающее боковую панель (onClick). При этом я использую библиотеку react-draggable, потому что все таблицы должны перемещаться свободно по экрану. Проблема в том, что при переносе (если мы тянем за заголовок), когда срабатывает onStop срабатывает вместе с ним и onClick. Как сделать, чтобы избежать этого? я не все методы кода прописала для краткости

 export const Table = ({
    table: table,
    onChangeTable: onChangeTableHandler,
    color: color,
    diagramId: diagramId,
    selectedDiagramType: selectedDiagramType,
}) => {
    const [isOpenTableDetails, setIsOpenTableDetails] = useState(false);
    const [tableInfoDetails, setTableInfoDetails] = useState({});
    const nodeRef = useRef();
    const [state, setState] = useState({
        right: false,
    });



    const updateXarrow = useXarrow();

const toggleDrawer = (anchor, open) => (event) => {
        if (
            event.type === "keydown" &&
            (event.key === "Tab" || event.key === "Shift")
        ) {
            return;
        }

        setState({ ...state, [anchor]: open });
    };

    const list = (anchor) => (
        <Box
            sx={{ width: 250 }}
            role="presentation"
            onClick={toggleDrawer(anchor, false)}
            onKeyDown={toggleDrawer(anchor, false)}
        >
            Hello!
        </Box>
    );
return (
<Draggable
                onDrag={updateXarrow}
                onStop={onChangePositionHandler}
                nodeRef={nodeRef}
                position={{ x: table.position.x, y: table.position.y }}
            >
                <div
                    id={table.name}
                    style={{
                        position: "absolute",
                        border: "2px solid",
                        borderRadius: "3px",
                        margin: "10px",
                        backgroundColor: color,
                    }}
                >
                    <div className={styles.TableHead}>
                        <div className={styles.HeaderContainer}>
                            {[`${table.name}`].map((anchor) => (
                                <React.Fragment key={anchor}>
                                    <div
                                    sx={{color: "white" }}
                                        onClick={toggleDrawer(anchor, true)}
                                    >
                                        {anchor}
                                    </div>
                                    <Drawer
                                        anchor={anchor}
                                        open={state[anchor]}
                                        onClose={toggleDrawer(anchor, false)}
                                    >
                                        {list(anchor)}
                                    </Drawer>
                                </React.Fragment>
                            ))}
                        </div>

                        <div
                            className={styles.InfoButton}
                            onClick={openModalWithTableInfo}
                        >
                            <InfoIcon />
                        </div>
                    </div>

                    <div className={styles.ColumnContainer}>
                        {table.columns?.map((column) => (
                            <Column
                                column={column}
                                key={column.name}
                                currentColor={color}
                            />
                        ))}
                    </div>
                    <div></div>
                </div>
            </Draggable>
    );
};