[Joy-UI] Not Compatible with React 19 element.ref Change

[yamatai12]

My environment is:

• react:19.1.0
• react-dom: 19.1.0
• mui/joy: 5.0.0-beta.52

📌 Background

Joy UI is currently not compatible with React 19 due to usage of the deprecated element.ref access.

⚠️ Error Observed

After upgrading to React 19 (react@19.1.0, react-dom@19.1.0), the following error is displayed:

Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.

This relates to the breaking change documented here:
https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-element-ref

🕵️ Investigation

• Joy UI version: @mui/joy@5.0.0-beta.52

• The error occurs at usage like:

<ForwardRef(Modal2)>

<Modal open={true} onClose={onClose}>

• The internal implementation of the Modal component in Joy UI appears to be accessing element.ref, which is now deprecated.

• Navigating to the compiled file (@mui_joy.js) confirms that ref is being accessed via element.ref.

🔍 Research

• No related issue or PR was found in the MUI repository
• StackOverflow has no current solution or discussion on Joy UI + React 19 compatibility.
• Note: It seems Material UI (core) has already addressed this React 19 ref issue.

---

✅ Expected

Would it be possible for Joy UI to adopt the new ref prop approach in React 19 instead of using element.ref?

---

Search keywords: