[data grid] Noisy warning, Accessing element.ref was removed in React 19

[scrabase]

Steps to reproduce

Link to live example: (required)

Steps:

1. install data-grid-pro
2. simple demo code keeps warning

Current behavior

Full error messages looks like this

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
...

Data Grid Toolbar component and Data Grid Header component toolbar keeps noisy warning.

Expected behavior

no warning.

Context

No response

Your environment

npx @mui/envinfo

System:
    OS: macOS 14.4.1
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 8.15.1 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.156
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base: 5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/icons-material: ^5.15.15 => 5.15.15 
    @mui/lab: 5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: ^5.15.15 => 5.15.15 
    @mui/material-nextjs: ^5.15.11 => 5.15.11 
    @mui/styled-engine-sc: latest => 6.0.0-alpha.18 
    @mui/utils: ^5.15.14 => 5.15.14 
    @mui/x-data-grid: ^7.3.2 => 7.3.2 
    @mui/x-data-grid-generator:  7.3.2 
    @mui/x-data-grid-pro: ^7.3.2 => 7.3.2 
    @mui/x-date-pickers: ^7.3.2 => 7.3.2 
    @mui/x-date-pickers-pro: ^7.3.2 => 7.3.2 
    @mui/x-license: ^7.1.1 => 7.2.0 
    @types/react: ^18 => 18.3.1 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1 
    typescript: ^5 => 5.4.5 

npx next info

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: 1.22.18
  pnpm: 8.15.1
Relevant Packages:
  next: 14.3.0-canary.51 // There is a newer canary version (14.3.0-canary.54) available, please upgrade! 
  eslint-config-next: 14.1.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5

Search keywords: Tooltip, element.ref, react19

[scrabase]

It seems that this warning only occured when using nextjs canary version (v14.3.0-canary.54)
Latest nextjs version(14.2.3) has no warning

[flaviendelangle]

It's probably related to React 18.3 which introduces warning for APIs deprecated and removed in React 19
We are working toward supporting React 19 so those warnings should go away in the coming weeks 👍

[michelengelen]

Let's keep this on the board to track it. 👍🏼

[arminmeh]

My tests while working on
#15342
show that this error is only visible if material-ui v5 is used together with the x components.

Upgrading to material-ui v6 resolves the issue.

@scrabase, you can follow the umbrella issue for the React 19 support on the material-ui side. Feel free to add a comment if you need the React 19 support on material-ui v5 because you can't upgrade to v6

[DiegoAndai]

Hey! Most React 19 changes in Material UI v6 are now backported to Material UI v5, so upgrading to the latest Material UI v5 version should remove the warning (you can follow the backport progress here).