ReferenceError: React is not defined using Disclosure with as='div' prop

[fernandordev]

I'm using Disclosure with as='div' prop:

function QuestionsComponent({ title, answer }) {
  return (
    <Disclosure as={'div'} className="group rounded-lg bg-graySurface p-8 shadow-sm">
      {({ open }) => (
        <>
          <Disclosure.Button className="flex w-full items-center justify-between text-start">
            <h1 className="font-semibold  text-white">{title}</h1>

            <ChevronDownIcon
              className={`${
                open && '-rotate-180'
              } ml-1.5 h-5 w-5 flex-shrink-0 transition duration-300`}
            />
          </Disclosure.Button>
          <Transition
            show={open}
            enter="transition ease-out duration-200"
            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"
          >
            <Disclosure.Panel static>
              <p className="mt-6 text-gray-400">{answer}</p>
            </Disclosure.Panel>
          </Transition>
        </>
      )}
    </Disclosure>
  );
}

When building for pruduction, I'm gettings this on console log:

ReferenceError: React is not defined

If I remove the as='div' prop, things work correctly.

Any reasons why this happens?

Using @headlessui/react v1.6.6 with Vite