React + ChakraUI the position of a selected element in an iframe

Question

I'm creating a page, in that page I added an iframe with src to an external website. It shows me a page by a given URL. And to get information from a selected element in the iframe, I created a class Editor, there are several methods inside this class: Example:

onElementSelected(callback: ElementSelectedCallback) {
  this.on_element_selected = callback
}

/**
 * When selection is removed (e.g. user pressed Esc)
*/
onElementDeselected(callback: ElementDeselectedCallback) {
  this.on_element_deselected = callback
}

/**
 * When user scrolls the page
*/
onPageScroll(callback: PageScrollCallback) {
  this.on_scroll = callback
}

The method onElementSelected returns me this info:

interface SelectedElement {
  tag_name: string
  selector: string
  x: number
  y: number
  width: number
  height: number
  html: string
  is_clickable: boolean
}

And I need to show/hide a custom popover in the position depending on the selected element data, for example something like this: enter image description here

To realize this functionality I added a position: 'absolute' style to the popover and top with left position I'm setting via props by take it from the interface above.

But I have a problem with onScroll event listener and data from that. If I select an element in the middle of the iframe it returns me the Y position calculated from the body.

Any ideas please, how can I implement this functionality in right way?

This is my code where I create an instance of that class and use it's methods:

const [iframeScrollY, setScrollY] = useState(0)
  const [iframeScrollX, setScrollX] = useState(0)
  const editor = useMemo(() => {
    const _editor = new EditorClient()

    _editor.onElementSelected((element: SelectedElement) => {
      if (element.selector) {
        setSelectedElement(element)
      }
    })

    _editor.onPageScroll(({ x, y }: ScrollDetails) => {
      setScrollY(y)
      setScrollX(x)
    })

    _editor.onElementDeselected(() => {
      console.log('Element deselected')
      setSelectedElement(null)
    })

    return _editor
  }, [])

And this is a template with the iframe and the popover components:

return (
  <>
    <AspectRatio w='100%' style={{ position: 'relative' }}>
      <iframe ref={iframe} allowFullScreen />
    </AspectRatio>

    {selectedElement ? (
      <EditorToolbar element={selectedElement} iframeScrollY={iframeScrollY} iframeScrollX={iframeScrollX} />
    ) : null}
  </>
)

All of my attempts I described above