[utils] skip deep clone React element (v5.x)

packages/mui-utils/src/deepmerge/deepmerge.test.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { expect } from 'chai';
 import { runInNewContext } from 'vm';
 import deepmerge from './deepmerge';
@@ -122,4 +123,12 @@ describe('deepmerge', () => {
     expect(result).to.deep.equal({ foo: { baz: 'new test' } });
     expect(foo).to.deep.equal({ foo: { baz: 'test' } });
   });
+
+  it('should not deep clone React element', () => {
+    const element = React.createElement('div', {}, React.createElement('span'));
+    const element2 = React.createElement('a');
+    const result = deepmerge({ element }, { element: element2 });
+
+    expect(result.element).to.equal(element2);
+  });
 });

packages/mui-utils/src/deepmerge/deepmerge.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 // https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
 export function isPlainObject(item: unknown): item is Record<keyof any, unknown> {
   if (typeof item !== 'object' || item === null) {
@@ -19,7 +21,7 @@ export interface DeepmergeOptions {
 }
 
 function deepClone<T>(source: T): T | Record<keyof any, unknown> {
-  if (!isPlainObject(source)) {
+  if (React.isValidElement(source) || !isPlainObject(source)) {
     return source;
   }
 
@@ -41,7 +43,9 @@ export default function deepmerge<T>(
 
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach((key) => {
-      if (
+      if (React.isValidElement(source[key])) {
+        (output as Record<keyof any, unknown>)[key] = source[key];
+      } else if (
         isPlainObject(source[key]) &&
         // Avoid prototype pollution
         Object.prototype.hasOwnProperty.call(target, key) &&