Modal is breaking in React 19, "Accessing element.ref was removed in React 19. ref is now a regular prop"

[Machinarius]

Bug Report

SUI React reads .ref directly which is broken in React 19 - https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop

Steps

Upgrade a project that uses Modals from "semantic-ui-react": "v3.0.0-beta.2" to Next 15 and React 19, then see code that worked perfectly now crash with "Accessing element.ref was removed in React 19. ref is now a regular prop", so only the background/dimmer of the Modal renders.

I've managed to track down the direct ref usage to this line but I don't have enough React knowledge to even begin to understand how to fix this issue in a fork.

Expected Result

The Modal should still work.

Actual Result

The Modal only renders the dimmer in our application. The repro provided exhibits a different behavior but surfaces the same error message in the console:

Version

v3.0.0-beta.2

Testcase

https://codesandbox.io/p/devbox/semantic-ui-react-forked-mdn5mj?file=%2Findex.js%3A20%2C17&workspaceId=ws_DBJgAPifRn3w3QV6PWgNsY

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[skoselapma]

This error makes the page unusable by placing a blur over the entire page.

A temporary workaround I found was to remove the dimmer prop.