[material-ui] Accessing element.ref was removed in React 19

[oliviertassinari]

In React 19, ref is now a prop and should be accessed through props.ref. We have some instances of this we should fix: https://github.com/search?q=repo:mui/material-ui%20children.ref&type=code

Example with Tooltip

https://codesandbox.io/p/sandbox/silly-sea-m9cjyn?file=%2Fsrc%2FDemo.tsx

import * as React from "react";
import Tooltip from "@mui/material/Tooltip";

export default function BasicTooltip() {
  const ref = React.useRef();
  return (
    <Tooltip title="Delete">
      <button ref={ref}>hello</button>
    </Tooltip>
  );
}

Warning: 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.
at Tooltip (node_modules/@mui/material/Tooltip/Tooltip.js:294:85)

Context

• First reported in [data grid] 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 mui-x#13432
• https://github.com/radix-ui/primitives/pull/2811/files#r1601508869 explain what happens

material-ui/packages/mui-material/src/Tooltip/Tooltip.js

Line 560 in 5149a65

const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);

Your environment

react v19.0.0-rc.0
@mui/material v5.15.19

[DiegoAndai]

Updated issue so it covers all cases and not only the Tooltip one.

[luc-nham]

The Select component also appears the warning. My environment:

• Rect 19 Cavani
• Mui 5x