From 8046fdd75faef39118db49c96326904c07e9b4dc Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Thu, 23 May 2024 15:52:39 -0400
Subject: [PATCH] [core] Fix React 18.3 warnings about spreading keys in the
 Material UI `Autocomplete` component (#42099) (#42241)

---
 .../useAutocomplete/useAutocomplete.test.js   |  7 ++++++-
 .../src/Autocomplete/Autocomplete.js          | 20 +++++++++++--------
 .../src/Autocomplete/Autocomplete.test.js     |  5 ++++-
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
index 264f0ee8f67ce2..9eeadda0cb3001 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
@@ -31,7 +31,12 @@ describe('useAutocomplete', () => {
           {groupedOptions.length > 0 ? (
             <ul {...getListboxProps()}>
               {groupedOptions.map((option, index) => {
-                return <li {...getOptionProps({ option, index })}>{option}</li>;
+                const { key, ...optionProps } = getOptionProps({ option, index });
+                return (
+                  <li key={key} {...optionProps}>
+                    {option}
+                  </li>
+                );
               })}
             </ul>
           ) : null}
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index 301c876212c78f..cfa68d8f35827e 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -552,14 +552,18 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
-      startAdornment = value.map((option, index) => (
-        <Chip
-          label={getOptionLabel(option)}
-          size={size}
-          {...getCustomizedTagProps({ index })}
-          {...ChipProps}
-        />
-      ));
+      startAdornment = value.map((option, index) => {
+        const { key, ...customTagProps } = getCustomizedTagProps({ index });
+        return (
+          <Chip
+            key={key}
+            label={getOptionLabel(option)}
+            size={size}
+            {...customTagProps}
+            {...ChipProps}
+          />
+        );
+      });
     }
   }
 
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 9446aa9aed4a29..226ae973423958 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -638,7 +638,10 @@ describe('<Autocomplete />', () => {
           renderTags={(value, getTagProps) =>
             value
               .filter((x, index) => index === 1)
-              .map((option, index) => <Chip label={option.title} {...getTagProps({ index })} />)
+              .map((option, index) => {
+                const { key, ...tagProps } = getTagProps({ index });
+                return <Chip key={key} label={option.title} {...tagProps} />;
+              })
           }
           onChange={handleChange}
           renderInput={(params) => <TextField {...params} autoFocus />}