如何使 React-Material-UI Popper 可拖动？

如何解决如何使 React-Material-UI Popper 可拖动？

我想用 Popper 动态改变屏幕上的 react-draggable 位置。

这是我的代码：

import PopupState,{bindPopper,bindToggle} from "material-ui-popup-state";

     ...
       return (
            <PopupState variant={"popper"} popupId='demo-popper'>
            {(popupState) => {
                // popupState.anchorEl = undefined <-- THIS WORKS BUT ERROR WITH 'anchorEl' IS RAISED
                return (
                    <div>
                        <Button variant="contained" color="primary" {...bindToggle(popupState)}>
                            Toggle Popper
                        </Button>
                        <Draggable defaultPosition={position}>
                            <Popper {...bindPopper(popupState)}
                                    transition
                                    className={classes.popper}
                                    placement='bottom-start'
                            >
                                <Paper elevation={5}>
                                    <Typography variant={"h2"} className={classes.typography}>
                                        POPUP BODY
                                    </Typography>
                                </Paper>
                            </Popper>
                        </Draggable>
                    </div>
                )
            }}
        </PopupState>
      )

... 和 CODE Sandbox

如您所见，当我使 popupState.anchorEl = undefined 拖动功能有效时，会出现 anchorEl 错误。

失败的道具类型：Material-UI：提供给组件的 anchorEl 道具无效。 它应该是一个 HTML 元素实例或一个 referenceObject (https://popper.js.org/docs/v1/#referenceObject)。

设置 anchorEl 时，<Draggable> 不起作用。 我认为在每个组件渲染上，由于拖动，Popup 的位置正在改变，但由于设置了 anchorEl

，它立即恢复为默认值

Popper.js docs

有人知道如何解决这个问题吗？