Popover in a container div element, not body

[neznayer]

How could I show popover inside some element?

Use case:
I have a web app with left panel of fixed width, and right area. Inside the right area there are some Task elements. They are positioned absolutely relative to the right area. On click on the Task, I want a detail Popover to open, but I don't want it to hover over the left area. So effectively, I want the area over which the popover shows to be restricted to the right area.

I thought that wrapping the content in popover into the <Popover.Portal container={document.querySelector(".right-area")}> would do the trick, but It's still rendered inside the body and not inside the element with .right-area class...

reproduction is here
https://stackblitz.com/edit/vitejs-vite-lrbnmgxn?file=src%2FApp.tsx