Реагировать - отправка ссылки в качестве опоры не работает

Я использую библиотеку реагировать-муи в своем проекте, где я хотел бы реализовать компонент MenuList, найденный в составе MenuList здесь. Однако в моем приложении я отправляю ref как prop в child component, где у меня есть menu. Вы можете увидеть пример кода и окна здесь. Когда я отправляю метод ref и setRef как props из родительского компонента следующим образом:

state = {
    open: false,
    ref: React.createRef()
  };

  setRef = element => {
    this.setState({ ref: element });
  };

  handleToggle = () => {
    this.setState(state => ({ open: !state.open }));
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <MenuListComposition
        setRef = {this.setRef}
        handleToggle = {this.handleToggle}
        handleClose = {this.handleClose}
        open = {this.state.open}
        ref = {this.state.ref}
      />
    );
  }

Для дочернего компонента, у которого есть кнопка меню:

    <MenuButton
      className = {classes.button}
      handleToggle = {handleToggle}
      setRef = {setRef}
      open = {open}
      ref = {ref}
   />

Затем компонент Popper, у которого есть список меню, открывается не в том месте, что вы можете увидеть в примере codesanbox, если вы нажмете на значок TOGGLE MENU GROW button.

      <Popper open = {open} anchorEl = {ref} transition disablePortal>
          {({ TransitionProps, placement }) => (
            <Grow
              {...TransitionProps}
              id = "menu-list-grow"
              style = {{
                transformOrigin:
                  placement === "bottom" ? "center top" : "center bottom"
              }}
            >
              <Paper>
                <ClickAwayListener onClickAway = {handleClose}>
                  <MenuList>
                    <MenuItem onClick = {handleClose}>Profile</MenuItem>
                    <MenuItem onClick = {handleClose}>My account</MenuItem>
                    <MenuItem onClick = {handleClose}>Logout</MenuItem>
                  </MenuList>
                </ClickAwayListener>
              </Paper>
            </Grow>
          )}
        </Popper>

Что я делаю неправильно и как это исправить, или как я могу использовать ref в компоненте stateless, чтобы не отправлять ref как prop?