How do I fix Headless-UI/React not animating an entering transition properly?

[jip101]

I am working on a react component with 2 separate transitions. The icon to open the dialog correctly enters/leaves on click but the actual dialog does not. The intended transition is on dialog opening, the icon to open it slides down out of view and the dialog box slides up into view then vice versa on close.

What's currently happening is, on open, the dialog box is starting at the original position in the page then sliding down to a lower position than intended. On close, it continues down in the intended direction.

Here is the component in action. Example

I'm using

"@headlessui/react": "^1.7.17",
"react": "^18.2.0",

And here is the minimal code causing the issue,

export default function App() {
  const [showDialog, setShowDialog] = useState(false)

  function openDialog() {
    setShowDialog(true)
  }

  function closeDialog() {
    setShowDialog(false)
  }

return (

/...Rest of code.../

   <Transition 
        show={!showDialog}
        as="button"
        className='w-16 fixed bottom-[20%] right-8 bg-buttonPrimary p-2 rounded-full hover:shadow-sm hover:shadow-slate-50 hover:scale-110'
        onClick={openDialog}
        enter="transition ease-in-out duration-500 transform"
        enterFrom="translate-y-96"
        enterTo="-translate-y-0"
        leave="transition ease-in-out duration-500 transform"
        leaveFrom="translate-y-0"
        leaveTo="translate-y-96"
    >
        <img src={boxIcon} alt="Picture of open box" />
    </Transition>


    <Transition
      show={showDialog}
      as={Fragment}
      enter="transition ease-in-out duration-500 transform"
      enterFrom="translate-y-96"
      enterTo="translate-y-0"
      leave="transition ease-in-out duration-500 transform"
      leaveFrom="translate-y-0"
      leaveTo="translate-y-96"
    >
        <Dialog 
          onClose={closeDialog} 
          className='w-3/4 flex flex-col mx-auto fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
        >

          /...Contents of Dialog Component.../

        </Dialog>
    </Transition>
)
}

So far, I've tried to remove the dialog, I've tested other transition effects, removed the translate className in the Dialog, wrapped the transition and/or dialog in a div and applied classes to that. Nothing has made a difference so far. The only thing that made a difference is setting the transition around the dialog to as='div' instead of as={fragment} which causes there to be no animation.