Transition and Popover components causing errors when using SSR

[tedpalmer1]

Hi, I have an Astro.build project that I am working on and have been using headlessui for a while. I recently upgraded my Astro version and now I am getting many errors from my navbar component that uses the headlessui Transition and Popover components. This is the error I keep getting:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes. at Transition (/node_modules/@headlessui/react/dist/headlessui.dev.cjs:5125:9) at div at OpenClosedProvider (/node_modules/@headlessui/react/dist/headlessui.dev.cjs:486:31) at Popover (/node_modules/@headlessui/react/dist/headlessui.dev.cjs:3536:47) at Nav (/src/components/Nav.jsx:70:3)

I am using the latest version of headlessui and have no idea what to do. I really do not want to rebuild this navbar because it is pretty complicated. Any help or guidance would be much appreciated. Thank you!

Minimal reproduction repo: https://github.com/tedpalmer1/headlessui-issue