[Tooltip] `The children component of the Tooltip is not forwarding its props correctly` error when focusing another element

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

In the demo in https://mui.com/x/react-data-grid/editing/#validation, we wrap a InputBase into a Tooltip to show the validation error. The problem is that as soon as the user enters the edit mode (double-clicking the cell), we imperatively call inputRef.current.focus() to focus the input and this generates the following error:

The children component of the Tooltip is not forwarding its props correctly.

The problem seems to come from https://github.com/mui/material-ui/blob/6e69c8e8db54305f7602e11ea76b9b13adcf04cd/packages/mui-material/src/Tooltip/Tooltip.js#L425-L429

childNode initially has the correct element —the immediate child of Tooltip—, but when .focus is called, childNode becomes the input, which falls in

https://github.com/mui/material-ui/blob/6e69c8e8db54305f7602e11ea76b9b13adcf04cd/packages/mui-material/src/Tooltip/Tooltip.js#L549-L555

Expected behavior 🤔

No error in the console.

Steps to reproduce 🕹

Steps:

1. Open https://codesandbox.io/s/magical-brahmagupta-xgisfp?file=/src/App.tsx
2. Click "Toggle input"
3. Look at the console

Context 🔦

Related to https://github.com/mui/mui-x/issues/5457

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.