PopoverBackdrop not covering some page elements

[Konstiman]

Hi! I use the PopoverBackdrop in my project and some elements in the page aren't covered by it.

I created a minimal demo here:

https://codesandbox.io/p/devbox/headless-ui-popoverbackdrop-issue-94dpld

There's a div in the page that should be behind the backdrop but it's actually in front of it. This can be easily triggered by adding the className "relative" to any element.

What am I doing wrong? Or is that a bug?

[Konstiman]

UPDATE: the workaround is to render the PopoverBackdrop using React.createPortal, is that a recommended practice?