DialogOverlay Warning issue

[devikasenapathi-web]

hook.js:608 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of SlotClone. Error Component Stack
at DialogOverlay (dialog.tsx:31:3)
at chunk-HUY6GLHA.js?v=96b47857:73:11
at chunk-HUY6GLHA.js?v=96b47857:54:11
at chunk-4FLEHHND.js?v=96b47857:41:13
at chunk-ZQLE5DRD.js?v=96b47857:258:22
at Presence (chunk-2EPLQCBY.js?v=96b47857:24:11)
at Provider (chunk-EII4QUPS.js?v=96b47857:38:15)
at DialogPortal (chunk-7LH52GS3.js?v=96b47857:109:11)
at DialogPortal (dialog.tsx:19:6)
at DialogContent (dialog.tsx:47:3)
at Provider (chunk-EII4QUPS.js?v=96b47857:38:15)
at Dialog (chunk-7LH52GS3.js?v=96b47857:50:5)
at Dialog (dialog.tsx:7:6)
at DialogModal (index.tsx?t=1742973606092:14:31)
at LogoutModal (LogoutModal.tsx:16:3)
at ProfileMenu (ProfileMenu.tsx:22:31)
at div ()

I am using Dialog and AlertDialog components, but I am encountering a warning. How can I fix this issue?

[krills]

Also experiencing this, guessing there's some bug with react 18/19 ref changes and some version of radix dialog?

[Medafu]

Same issue, downgraded React to 18 in hopes it might change something, but doesn't seem to be the case.

[devikasenapathi-web]

Upgrading to React 19 and Shadcn v4 will fix this issue. If we are using Shadcn v4 with React 18, We would face this warning.