[utils] Do not deep merge React component

[siriwatknp]

closes #45052

Root cause

deepmerge currently iterate a React component that's wrapped with forwardRef or memo. The issue arise when using Link from nextjs (contains recursive render) because deepmerge will iterate infinitely causing maximum callstack error from the usage below:

import { createTheme } from '@mui/material/styles';
import Link from 'next/link';

const theme = createTheme({
  components: {
    MuiLink: {
      defaultProps: {
        component: Link,
      },
    },
  },
});

It does not make sense anyway to iterate fields inside a React component, so a side benefit of this PR is the performance improvement.

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-45058--material-ui.netlify.app/

Grow: parsed: +2.26% , gzip: +2.16%
Fade: parsed: +2.27% , gzip: +2.08%
Zoom: parsed: +2.27% , gzip: +2.08%
@material-ui/core/styles/createTheme: parsed: +3.18% , gzip: +3.03%
Slide: parsed: +2.17% , gzip: +1.99%
Stack: parsed: +1.80% , gzip: +1.42%
InputLabel: parsed: +1.72% , gzip: +1.43%
@mui/joy/SvgIcon: parsed: +1.94% , gzip: +1.76%
@mui/joy/Checkbox: parsed: +1.67% , gzip: +1.41%
@mui/joy/Radio: parsed: +1.71% , gzip: +1.45%
@mui/joy/Container: parsed: +1.99% , gzip: +1.83%
@mui/joy/Textarea: parsed: +1.73% , gzip: +1.45%
@mui/joy/Divider: parsed: +1.92% , gzip: +1.73%
@mui/joy/ListItemButton: parsed: +1.87% , gzip: +1.51%
@mui/joy/AccordionDetails: parsed: +1.91% , gzip: +1.73%
@mui/joy/Step: parsed: +1.88% , gzip: +1.71%
@mui/joy/CardContent: parsed: +1.95% , gzip: +1.76%
@mui/joy/StepButton: parsed: +1.93% , gzip: +1.74%
@mui/joy/ScopedCssBaseline: parsed: +1.95% , gzip: +1.74%
@mui/joy/Accordion: parsed: +1.78% , gzip: +1.61%
and 191 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against f3a4bf2

[siriwatknp]

Without the change in this PR, this test throws because the component is a new object. This test ensure that the Link is not iterated by deepmerge.

[DiegoAndai]

@siriwatknp why does React.isValidElement(source) not cover this case?

[siriwatknp]

React.isValidElement check React element like this <Icon /> but it does not check for React component.

createTheme({
  components: {
    MuiCheckbox: {
      defaultProps: {
        icon: <InfoSharp />, // React.isValidElement cover this
        component: CustomComponent, // React.isValidElement DOES not cover this
      },
    },
  },
});

[siriwatknp]

Tested locally, it fixes the issue.

[siriwatknp]

react-is is already a direct dependency of @mui/utils.