Popover positioning issue n Safari and broken content with opener id

[kmanisha29]

I was facing an issue with Popover attached to buttons for input that popover was opening at different places out of the container and also sometimes jumping back to correct opener. Also, content in them sometimes broken for input.
This is happening only in safari and not in chrome, firefox or edge.
As per doc we can send id or ref to opener for Popover and mostly for safari we should be suing ref itself.
hence tried sending ref as well but was still facing issue hence tried safari specifc repositioning by getting ref using id which solved most of issues.
With remounting as well the issues are resolved for broken content inside popover
Is there any better solution here that I should be using or is this a known issue. There is a slight flicker still visible for repositioning due to timeout (even with timeout 0)

this is the safari poistioning applied in useeffect with timeout 0 and popover ref->
const opener = document.getElementById(openerId)
if (opener && popoverElement) {
popoverElement.style.position = 'absolute'
const rect = opener.getBoundingClientRect()
popoverElement.style.top = ${rect.bottom + 4}px
popoverElement.style.left = ${rect.left}px
}

...