[popover] Is there a way to render the `Popover` oven an existing element in the DOM?

# Get help

### Context:
- On the page, I have the special element with the `id="special-trigger"`.
- I have an existing `SpecialPopover` component that contains all the styles and content formatting logic.

I want to render the `SpecialPopover` component over the `div#special-trigger`, queried from the DOM using the `querySelector()`.

### Issue:

Unfortunately, the `Popover` doesn't allow me to use anything beyond its own React tree as a trigger. Also, I can't pass the `HTMLElement` as a trigger. _As it'll create a duplicate in the DOM._

### Example

Codesandbox - https://codesandbox.io/p/sandbox/external-popover-trigger-forked-g463pp

### Questions
Is there a recommended way to deal with rendering the `Popover` component over an arbitrary element in the DOM, using it as the `Trigger`? That includes forwarding the `Popover.Trigger` props onto that element, including the event listeners.

---

Previously, we used the `tippy.js` imperative constructor - https://atomiks.github.io/tippyjs/v6/constructor/. It allows assigning popups to an existing HTML element pretty trivially:
```tsx
tippy(specialElement, {
content: "Here's the default content",
trigger: 'click'
});
```
Unfortunately, the technology is deprecated, has its a11y challenges and rough edges around focus/interactions handling.