رفرش کردن موقعیت

import React, { useState, useRef } from "react"
import ElementPopper from "react-element-popper"
import "react-element-popper/build/element_popper.css"

export default function App() {
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const ref = useRef()

  const globalProps = {
    element: (
      <Component 
        size={80}
        backgroundColor="red"
      >
        Refrence Element
      </Component>
    ),
    popper: (
      <Component 
        size={100}
        backgroundColor="white"
      >
        Popper Element
      </Component>
    ),
    position: "bottom",
    fixMainPosition: true,
    popperShadow: true,
    arrow: true
  }

  return (
    <div>
      <div style={{ marginBottom: "150px", padding: "0 10px" }}>
        <h2>مثال اول (بدون استفاده از refreshPosition) :</h2>
        {visible && <span>یک متن نمایشی تا عنصر مرجع را مجبور به حرکت کند!</span>}
        <ElementPopper {...globalProps} />
        <button
          onClick={() => setVisible(!visible)}
        >
          {visible ? "دوباره" : "کلیک کنید"}
        </button>
      </div>
    
      <div style={{ marginBottom: "150px", padding: "0 10px" }}>
        <h2>مثال دوم (با استفاده از refreshPosition) :</h2>
        {visible2 && <span>یک متن نمایشی تا عنصر مرجع را مجبور به حرکت کند!</span>}
        <ElementPopper ref={ref} {...globalProps} />
        <button
          onClick={() => {
            setVisible2(!visible2)
          
            ref.current.refreshPosition()
          }}
        >
          {visible2 ? "دوباره" : "کلیک کنید"}
        </button>
      </div>
    </div>
  )
}