[material-ui][Autocomplete] Fix React 18.3 key spread warnings in Autocomplete demos (#42691)

Author: aarongarciah

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) => (

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) => (

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

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