"... only 1 <Popover.Button /> supported" warning when buttons are inside the panel

[laradevitt]

I'm getting the warning added in #2007 (one for each button) even though there is only one button outside the panel.

The warning:

You are already using a <Popover.Button /> but only 1 <Popover.Button /> is supported.

Comment from this issue:

Note: it is also still possible to render <Popover.Button /> components inside the <Popover.Panel /> to close it as explained here: https://headlessui.com/react/popover#closing-popovers-manually

Am I doing something obviously wrong here?

import React, { Fragment } from 'react';
import { Link } from 'gatsby';
import { Popover, Transition } from '@headlessui/react';
import { XIcon, MenuIcon } from '@heroicons/react/outline';

const DropdownMenu = () => {
  return (
    <Popover className="relative">
      {({ open }) => (
        <>
          <Popover.Button>
            <span className="sr-only">Open menu</span>
            <MenuIcon className="h-6 w-6 sm:h-7 sm:w-7" aria-hidden="true" />
          </Popover.Button>

          <Transition
            show={open}
            as={Fragment}
            enter="transition ease-out duration-100"
            enterFrom="transform opacity-0 scale-95"
            enterTo="transform opacity-100 scale-100"
            leave="transition ease-in duration-75"
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
            <Popover.Panel
              static
              className="origin-top-right absolute"
            >
              <div>
                <Popover.Button>
                  <span className="sr-only">Close menu</span>
                  <XIcon className="h-7 w-7" aria-hidden="true" />
                </Popover.Button>
              </div>
              <div>
                <div>
                  <Popover.Button as={Link}
                    to="/contact/"
                  >
                    Contact
                  </Popover.Button>
                </div>
              </div>
            </Popover.Panel>
          </Transition>
        </>
      )}
    </Popover>
  )
};

export default DropdownMenu;

[twittkopf]

I've created an issue for this: #2143. Feel free to add anything there I might have missed.