How do I trigger a function when the headless ui react Disclosure component opens?

Question

I am using @headlessui/react and want to send a google event to the datalayer when one of my Accordion Disclosure components is in the open position. How can I trigger a function to run when it is opened?

<Disclosure>
        {({ open }) => (
          <>
            <Disclosure.Button
              className={...  }
            >
              NAME
            </Disclosure.Button>
            <Transition
              show={open}
              ref={ref}
              className="..."
              enter="..."
              enterFrom="m..."
              beforeEnter={setHeight}
              leave="m..."
              beforeLeave={() => {
                if (ref.current) ref.current.style.maxHeight = '0px'
              }}
            >
              <Disclosure.Panel>
                <div
                  className={...}
                >
                PANEL CONTENT
                </div>
              </Disclosure.Panel>
            </Transition>
          </>
        )}
      </Disclosure>

Answer 1

Ah you can put a return statement inside the function and add commands above.

 <Disclosure>
        {({ open }) => {

          DO WHATEVER YOU WANT

          return (
            <>
              <Disclosure.Button