Transition component not working for react headless ui

Question

I'm trying to use the react headless UI library for my dropdown menu. The docs say that I can add a Transition tag to make the dropdown animate, but for some reason the transition isn't applied. See the code below:

const DropDownMenu = () => {

    return (
        <Menu>
            <Menu.Button id='profile-button'>
                <Profile1 />
            </Menu.Button>
            <Transition
                enter="transition duration-1000 ease-out"
                enterFrom="transform scale-95 opacity-0"
                enterTo="transform scale-100 opacity-100"
                leave="transition duration-1000 ease-out"
                leaveFrom="transform scale-100 opacity-100"
                leaveTo="transform scale-95 opacity-0"
            >
                <Menu.Items className='dropdown profile-dropdown'>
                    <Menu.Item>
                        <button
                            className="dropdown-item"
                            onClick={() => setModal('account')}
                        >
                            <Profile2 className="dropdown-icon" />
                            Account
                        </button>
                    </Menu.Item>
                    <Menu.Item>
                        <button
                            className="dropdown-item"
                            onClick={() => setModal('settings')}
                        >
                            <SettingsIcon className="dropdown-icon" />
                            Settings
                        </button>
                    </Menu.Item>
                    <Menu.Item>
                        <button
                            className="dropdown-item"
                            onClick={() => setModal('help')}
                        >
                            <HelpIcon className="dropdown-icon" />
                            Help
                        </button>
                    </Menu.Item>
                </Menu.Items>
            </Transition>
        </Menu >
    )
}

Answer 1

Try to add the prop called "as" and use translate class utilities. Something like this:

<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"
>
{/* Other components */}
</Transition>