--button-width incorrect when parent is rendered with an animation

[RyanMcDonald]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

For example: v2.2.0

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/devbox/stupefied-rosalind-cfyp2k

Describe your issue
You can see in the repro URL I'm animating a Dialog that contains a Listbox, and the ListboxOptions don't take up the full width of the ListboxButton.

If an animation involving scale is used to show the content, --button-width is calculated before the animation finishes so it will be incorrect. The implementation of useElementSize uses a ResizeObserver, but that doesn't call the callback when its size changes via animation. It looks like the ResizeObserver's entry.borderBoxSize has the correct values, so maybe that would be an acceptable solution?

[abolajibisiriyu]

I have the same issue as well, I have a form rendered in a dialog