HeadlessUI dropdown menu breaks its position in client component (NextJS)

[mahestro]

I implemented the HeadlesUI dropdown menu component in a custom tsx file.

Everything works fine until I make this file use the "use client" directive, making the dropdown position set to the top left corner of the viewport.

See video

I tried many css hacks but nothing has worked so far.

What am I missing here?