From 7cf0b552b0eac8e808a253c522095dc97a31c097 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 20 Jun 2024 08:37:19 +0200
Subject: [PATCH] [material-ui][Autocomplete] Fix React 18.3 key spread
 warnings in Autocomplete demos (#42691)

---
 .../components/autocomplete/FixedTags.js      | 18 +++++----
 .../components/autocomplete/FixedTags.tsx     | 18 +++++----
 .../material/components/autocomplete/Sizes.js | 40 +++++++++++--------
 .../components/autocomplete/Sizes.tsx         | 40 +++++++++++--------
 4 files changed, 70 insertions(+), 46 deletions(-)

diff --git a/docs/data/material/components/autocomplete/FixedTags.js b/docs/data/material/components/autocomplete/FixedTags.js
index fc57e587e221b3..982b9f1f35c706 100644
--- a/docs/data/material/components/autocomplete/FixedTags.js
+++ b/docs/data/material/components/autocomplete/FixedTags.js
@@ -21,13 +21,17 @@ export default function FixedTags() {
       options={top100Films}
       getOptionLabel={(option) => option.title}
       renderTags={(tagValue, getTagProps) =>
-        tagValue.map((option, index) => (
-          <Chip
-            label={option.title}
-            {...getTagProps({ index })}
-            disabled={fixedOptions.indexOf(option) !== -1}
-          />
-        ))
+        tagValue.map((option, index) => {
+          const { key, ...tagProps } = getTagProps({ index });
+          return (
+            <Chip
+              key={key}
+              label={option.title}
+              {...tagProps}
+              disabled={fixedOptions.indexOf(option) !== -1}
+            />
+          );
+        })
       }
       style={{ width: 500 }}
       renderInput={(params) => (
diff --git a/docs/data/material/components/autocomplete/FixedTags.tsx b/docs/data/material/components/autocomplete/FixedTags.tsx
index fc57e587e221b3..982b9f1f35c706 100644
--- a/docs/data/material/components/autocomplete/FixedTags.tsx
+++ b/docs/data/material/components/autocomplete/FixedTags.tsx
@@ -21,13 +21,17 @@ export default function FixedTags() {
       options={top100Films}
       getOptionLabel={(option) => option.title}
       renderTags={(tagValue, getTagProps) =>
-        tagValue.map((option, index) => (
-          <Chip
-            label={option.title}
-            {...getTagProps({ index })}
-            disabled={fixedOptions.indexOf(option) !== -1}
-          />
-        ))
+        tagValue.map((option, index) => {
+          const { key, ...tagProps } = getTagProps({ index });
+          return (
+            <Chip
+              key={key}
+              label={option.title}
+              {...tagProps}
+              disabled={fixedOptions.indexOf(option) !== -1}
+            />
+          );
+        })
       }
       style={{ width: 500 }}
       renderInput={(params) => (
diff --git a/docs/data/material/components/autocomplete/Sizes.js b/docs/data/material/components/autocomplete/Sizes.js
index ca0235e0bc38d6..741046dabddb9d 100644
--- a/docs/data/material/components/autocomplete/Sizes.js
+++ b/docs/data/material/components/autocomplete/Sizes.js
@@ -66,14 +66,18 @@ export default function Sizes() {
         getOptionLabel={(option) => option.title}
         defaultValue={top100Films[13]}
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
-            <Chip
-              variant="outlined"
-              label={option.title}
-              size="small"
-              {...getTagProps({ index })}
-            />
-          ))
+          value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip
+                key={key}
+                variant="outlined"
+                label={option.title}
+                size="small"
+                {...tagProps}
+              />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField
@@ -92,14 +96,18 @@ export default function Sizes() {
         getOptionLabel={(option) => option.title}
         defaultValue={[top100Films[13]]}
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
-            <Chip
-              variant="outlined"
-              label={option.title}
-              size="small"
-              {...getTagProps({ index })}
-            />
-          ))
+          value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip
+                key={key}
+                variant="outlined"
+                label={option.title}
+                size="small"
+                {...tagProps}
+              />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField
diff --git a/docs/data/material/components/autocomplete/Sizes.tsx b/docs/data/material/components/autocomplete/Sizes.tsx
index ca0235e0bc38d6..741046dabddb9d 100644
--- a/docs/data/material/components/autocomplete/Sizes.tsx
+++ b/docs/data/material/components/autocomplete/Sizes.tsx
@@ -66,14 +66,18 @@ export default function Sizes() {
         getOptionLabel={(option) => option.title}
         defaultValue={top100Films[13]}
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
-            <Chip
-              variant="outlined"
-              label={option.title}
-              size="small"
-              {...getTagProps({ index })}
-            />
-          ))
+          value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip
+                key={key}
+                variant="outlined"
+                label={option.title}
+                size="small"
+                {...tagProps}
+              />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField
@@ -92,14 +96,18 @@ export default function Sizes() {
         getOptionLabel={(option) => option.title}
         defaultValue={[top100Films[13]]}
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
-            <Chip
-              variant="outlined"
-              label={option.title}
-              size="small"
-              {...getTagProps({ index })}
-            />
-          ))
+          value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip
+                key={key}
+                variant="outlined"
+                label={option.title}
+                size="small"
+                {...tagProps}
+              />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField