I can't on a button that's on top of the ui

[alvillaraza]

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
1.7.13

What browser are you using?
Chrome

Reproduction URL
Sorry, I do not have this. I hope that the video will suffice.

You can use one of the starting projects on CodeSandbox:

• With React and Tailwind CSS: https://codesandbox.io/s/github/tailwindlabs/reproduction-headlessui-react
• With Vue and Tailwind CSS: https://codesandbox.io/s/github/tailwindlabs/reproduction-headlessui-vue

Describe your issue
Here is a video I recorded of my issue: https://www.loom.com/share/ccc97a6c8a43461ea2bc8ecc07eeec6c?sid=584a74ae-3aa5-4bd5-ad95-9344dcc23245

I am unable to click on a close button on a banner. It looks like there is an invisible div that is on top of the banner. I've tried z-index, and still does not let me click.

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

I expect to be able to click on the button if it's visually on top.

[robyn3choi]

This is happening to me too after upgrading from 1.6.4 to 1.7.18.

[robyn3choi]

This issue doesn't happen on version 1.7.11, but it does happen on 1.7.12 and up.