React Popper не остается рядом со своим элементом при прокрутке вниз

Question

Моя цель здесь - показать всплывающее окно параметров общего доступа при нажатии кнопки. Когда я вверху экрана все выглядит хорошо. Но когда я прокручиваю вниз и нажимаю на него, всплывающее окно будет отображаться вверху, как если бы ссылка никогда не указывалась на новую позицию. Не уверен, что я делаю не так, я посмотрел документы 10 раз и до сих пор не могу найти ответ.

render() {
    const { showOptions, toggleOptions } = this.props
    const { title, id } = this.props.post

    return (
      <Manager>
        <Reference>
          {({ ref }) => (
            <button ref={ref} onClick={toggleOptions} className="options-item">
              <img src={shareIcon} alt="Share Icon" />
            </button>
          )}
        </Reference>
        {showOptions && (
          <Popper innerRef={(elem) => elem} placement="top">
            {({ ref, style, placement }) => (
              <OptionsMenu ref={ref} style={style} data-placement={placement}>
                <OptionsItem
                  onClick={() => {
                    this.sharePost(
                      `https://www.facebook.com/dialog/share?app_id=${
                        process.env.FACEBOOK_APP_ID
                      }&href=https://fan.guru/p/${id}`,
                      toggleOptions,
                    )
                  }}
                >
                  <i className="fab fa-facebook" />
                </OptionsItem>
                <OptionsItem
                  onClick={() => {
                    this.sharePost(
                      `https://twitter.com/intent/tweet?text=${title} https://fan.guru/p/${id}`,
                      toggleOptions,
                    )
                  }}
                >
                  <i className="fab fa-twitter" />
                </OptionsItem>
                <OptionsItem
                  onClick={() => {
                    this.sharePost(
                      `https://www.reddit.com/submit?url=https://fan.guru/p/${id}&title=${title}`,
                      toggleOptions,
                    )
                  }}
                >
                  <i className="fab fa-reddit-alien" />
                </OptionsItem>
                <OptionsItem
                  onClick={() => {
                    this.sharePost(
                      `mailto:?subject=${title}&body=https://fan.guru/p/${id}`,
                      toggleOptions,
                    )
                  }}
                >
                  <i className="fas fa-envelope" />
                </OptionsItem>
                <OptionsItem
                  onClick={() => {
                    this.copyToClipboard(toggleOptions)
                  }}
                >
                  <i className="fas fa-link" />
                </OptionsItem>
              </OptionsMenu>
            )}
          </Popper>
        )}
      </Manager>
    )
  }
}

export default PostShareButton

const OptionsMenu = styled.div`
  background: #562e91;
  padding: 10px;
  border-radius: 10px;
  > * {
    font-size: 10px;
  }
`

const OptionsItem = styled.button`
  color: white;
  font-size: 1.3em;
  margin: 0 5px;
`