HeadlessUI popover not tappable on mobile devices

I'm having a problem trying to tap on a HeadlessUI popover menu when using a mobile device or when viewing a page in the Chrome device toolbar. It seems to work fine in regular desktop browser mode. I've spent several hours testing and distilling the code into its simplest form inside a code sandbox, which can be viewed and demonstrated here:

https://codesandbox.io/s/react-tailwind-rive-animation-tap-issue-bxlt95?file=/src/App.js

Here is the relevant portion of the code:

<Popover className="z-5 relative">
  {({ open }) => (
    <>
      <div className="relative z-10">
        <Popover.Button
          aria-label="Main menu"
          className="text-stone-500 focus:outline-none"
        >
          <div className="w-12 h-12">
            <Bars3Icon />
          </div>
        </Popover.Button>
      </div>

      <Transition
        as={Fragment}
        enter="transition ease-out duration-200"
        enterFrom="opacity-0 -translate-y-1"
        enterTo="opacity-100 translate-y-0"
        leave="transition ease-in duration-150"
        leaveFrom="opacity-100 translate-y-0"
        leaveTo="opacity-0 -translate-y-1"
      >
        <Popover.Panel className="absolute right-0 z-10 mt-2 w-[250px] transform drop-shadow-2xl md:w-[600px] bg-white">
          Popup Menu
        </Popover.Panel>
      </Transition>
    </>
  )}
</Popover>

I'm trying to figure out what is preventing the menu from popping up when tapped as it usually does in the browser. Thanks in advance for your help.

Someone answered my question earlier in another forum. The problem was that my div was capturing the tap and not passing it down to the animation. By adding style={{ pointerEvents: "none" }} to the div surrounding the menu icon, it started working again.