From f258d3dc3c43852b65c0c7c58638d4b4cb5c7f33 Mon Sep 17 00:00:00 2001
From: wbt <wbt@users.noreply.github.com>
Date: Thu, 13 Jun 2024 13:57:31 -0400
Subject: [PATCH 1/5] Fix error in Google Maps example

Signed-off-by: wbt <wbt@users.noreply.github.com>
---
 docs/data/material/components/autocomplete/GoogleMaps.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/GoogleMaps.tsx
index 1b855645eed1a9..10a69af2fac362 100644
--- a/docs/data/material/components/autocomplete/GoogleMaps.tsx
+++ b/docs/data/material/components/autocomplete/GoogleMaps.tsx
@@ -144,9 +144,9 @@ export default function GoogleMaps() {
           option.structured_formatting.main_text,
           matches.map((match: any) => [match.offset, match.offset + match.length]),
         );
-
+        const {key, ...nonKeyProps} = props as any;
         return (
-          <li {...props}>
+          <li key={key} {...nonKeyProps}>
             <Grid container sx={{ alignItems: 'center' }}>
               <Grid item sx={{ display: 'flex', width: 44 }}>
                 <LocationOnIcon sx={{ color: 'text.secondary' }} />

From aec84ee13192cc930ab6958b353e3e8de199b6c3 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 13:13:52 +0200
Subject: [PATCH 2/5] Remove any

---
 docs/data/material/components/autocomplete/GoogleMaps.js  | 4 ++--
 docs/data/material/components/autocomplete/GoogleMaps.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/data/material/components/autocomplete/GoogleMaps.js b/docs/data/material/components/autocomplete/GoogleMaps.js
index 90168362e2f93d..a418c05c4e67b2 100644
--- a/docs/data/material/components/autocomplete/GoogleMaps.js
+++ b/docs/data/material/components/autocomplete/GoogleMaps.js
@@ -120,9 +120,9 @@ export default function GoogleMaps() {
           option.structured_formatting.main_text,
           matches.map((match) => [match.offset, match.offset + match.length]),
         );
-
+        const { key, ...nonKeyProps } = props;
         return (
-          <li {...props}>
+          <li key={key} {...nonKeyProps}>
             <Grid container sx={{ alignItems: 'center' }}>
               <Grid item sx={{ display: 'flex', width: 44 }}>
                 <LocationOnIcon sx={{ color: 'text.secondary' }} />
diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/GoogleMaps.tsx
index 10a69af2fac362..b8c76ef91caaa3 100644
--- a/docs/data/material/components/autocomplete/GoogleMaps.tsx
+++ b/docs/data/material/components/autocomplete/GoogleMaps.tsx
@@ -144,7 +144,7 @@ export default function GoogleMaps() {
           option.structured_formatting.main_text,
           matches.map((match: any) => [match.offset, match.offset + match.length]),
         );
-        const {key, ...nonKeyProps} = props as any;
+        const { key, ...nonKeyProps } = props;
         return (
           <li key={key} {...nonKeyProps}>
             <Grid container sx={{ alignItems: 'center' }}>

From db04510330ffb2eac3e3d088c5d135813555c6b5 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 13:23:49 +0200
Subject: [PATCH 3/5] Rename var

---
 docs/data/material/components/autocomplete/GoogleMaps.js  | 4 ++--
 docs/data/material/components/autocomplete/GoogleMaps.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/data/material/components/autocomplete/GoogleMaps.js b/docs/data/material/components/autocomplete/GoogleMaps.js
index a418c05c4e67b2..cf8b62b09ae383 100644
--- a/docs/data/material/components/autocomplete/GoogleMaps.js
+++ b/docs/data/material/components/autocomplete/GoogleMaps.js
@@ -120,9 +120,9 @@ export default function GoogleMaps() {
           option.structured_formatting.main_text,
           matches.map((match) => [match.offset, match.offset + match.length]),
         );
-        const { key, ...nonKeyProps } = props;
+        const { key, ...optionProps } = props;
         return (
-          <li key={key} {...nonKeyProps}>
+          <li key={key} {...optionProps}>
             <Grid container sx={{ alignItems: 'center' }}>
               <Grid item sx={{ display: 'flex', width: 44 }}>
                 <LocationOnIcon sx={{ color: 'text.secondary' }} />
diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/GoogleMaps.tsx
index b8c76ef91caaa3..0679808313b0e8 100644
--- a/docs/data/material/components/autocomplete/GoogleMaps.tsx
+++ b/docs/data/material/components/autocomplete/GoogleMaps.tsx
@@ -144,9 +144,9 @@ export default function GoogleMaps() {
           option.structured_formatting.main_text,
           matches.map((match: any) => [match.offset, match.offset + match.length]),
         );
-        const { key, ...nonKeyProps } = props;
+        const { key, ...optionProps } = props;
         return (
-          <li key={key} {...nonKeyProps}>
+          <li key={key} {...optionProps}>
             <Grid container sx={{ alignItems: 'center' }}>
               <Grid item sx={{ display: 'flex', width: 44 }}>
                 <LocationOnIcon sx={{ color: 'text.secondary' }} />

From ccb5da7494595417d156cdfd3bd3edc08a12e7b3 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 13:40:46 +0200
Subject: [PATCH 4/5] Fix React 18.3 key spread warnings in Autocomplete demos

---
 .../components/autocomplete/CheckboxesTags.js | 25 ++---
 .../autocomplete/CheckboxesTags.tsx           | 25 ++---
 .../components/autocomplete/CountrySelect.js  | 32 ++++---
 .../components/autocomplete/CountrySelect.tsx | 32 ++++---
 .../autocomplete/FreeSoloCreateOption.js      |  9 +-
 .../autocomplete/FreeSoloCreateOption.tsx     |  9 +-
 .../FreeSoloCreateOptionDialog.js             |  9 +-
 .../FreeSoloCreateOptionDialog.tsx            |  9 +-
 .../components/autocomplete/GitHubLabel.js    | 93 ++++++++++---------
 .../components/autocomplete/GitHubLabel.tsx   | 93 ++++++++++---------
 .../autocomplete/GloballyCustomizedOptions.js | 34 ++++---
 .../GloballyCustomizedOptions.tsx             | 34 ++++---
 .../components/autocomplete/GoogleMaps.js     |  2 +-
 .../components/autocomplete/GoogleMaps.tsx    |  2 +-
 .../components/autocomplete/Highlights.js     |  3 +-
 .../components/autocomplete/Highlights.tsx    |  3 +-
 .../autocomplete/UseAutocomplete.js           | 11 ++-
 .../autocomplete/UseAutocomplete.tsx          | 11 ++-
 .../autocomplete/UseAutocomplete.tsx.preview  | 11 ++-
 .../components/autocomplete/Virtualize.js     |  4 +-
 .../components/autocomplete/Virtualize.tsx    |  4 +-
 21 files changed, 270 insertions(+), 185 deletions(-)

diff --git a/docs/data/material/components/autocomplete/CheckboxesTags.js b/docs/data/material/components/autocomplete/CheckboxesTags.js
index a07f37a4c05cd2..df72ec9733c6af 100644
--- a/docs/data/material/components/autocomplete/CheckboxesTags.js
+++ b/docs/data/material/components/autocomplete/CheckboxesTags.js
@@ -16,17 +16,20 @@ export default function CheckboxesTags() {
       options={top100Films}
       disableCloseOnSelect
       getOptionLabel={(option) => option.title}
-      renderOption={(props, option, { selected }) => (
-        <li {...props}>
-          <Checkbox
-            icon={icon}
-            checkedIcon={checkedIcon}
-            style={{ marginRight: 8 }}
-            checked={selected}
-          />
-          {option.title}
-        </li>
-      )}
+      renderOption={(props, option, { selected }) => {
+        const { key, ...optionProps } = props;
+        return (
+          <li key={key} {...optionProps}>
+            <Checkbox
+              icon={icon}
+              checkedIcon={checkedIcon}
+              style={{ marginRight: 8 }}
+              checked={selected}
+            />
+            {option.title}
+          </li>
+        );
+      }}
       style={{ width: 500 }}
       renderInput={(params) => (
         <TextField {...params} label="Checkboxes" placeholder="Favorites" />
diff --git a/docs/data/material/components/autocomplete/CheckboxesTags.tsx b/docs/data/material/components/autocomplete/CheckboxesTags.tsx
index a07f37a4c05cd2..df72ec9733c6af 100644
--- a/docs/data/material/components/autocomplete/CheckboxesTags.tsx
+++ b/docs/data/material/components/autocomplete/CheckboxesTags.tsx
@@ -16,17 +16,20 @@ export default function CheckboxesTags() {
       options={top100Films}
       disableCloseOnSelect
       getOptionLabel={(option) => option.title}
-      renderOption={(props, option, { selected }) => (
-        <li {...props}>
-          <Checkbox
-            icon={icon}
-            checkedIcon={checkedIcon}
-            style={{ marginRight: 8 }}
-            checked={selected}
-          />
-          {option.title}
-        </li>
-      )}
+      renderOption={(props, option, { selected }) => {
+        const { key, ...optionProps } = props;
+        return (
+          <li key={key} {...optionProps}>
+            <Checkbox
+              icon={icon}
+              checkedIcon={checkedIcon}
+              style={{ marginRight: 8 }}
+              checked={selected}
+            />
+            {option.title}
+          </li>
+        );
+      }}
       style={{ width: 500 }}
       renderInput={(params) => (
         <TextField {...params} label="Checkboxes" placeholder="Favorites" />
diff --git a/docs/data/material/components/autocomplete/CountrySelect.js b/docs/data/material/components/autocomplete/CountrySelect.js
index d9b9dc9a348435..47353368939fa7 100644
--- a/docs/data/material/components/autocomplete/CountrySelect.js
+++ b/docs/data/material/components/autocomplete/CountrySelect.js
@@ -11,18 +11,26 @@ export default function CountrySelect() {
       options={countries}
       autoHighlight
       getOptionLabel={(option) => option.label}
-      renderOption={(props, option) => (
-        <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
-          <img
-            loading="lazy"
-            width="20"
-            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
-            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
-            alt=""
-          />
-          {option.label} ({option.code}) +{option.phone}
-        </Box>
-      )}
+      renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
+        return (
+          <Box
+            key={key}
+            component="li"
+            sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+            {...optionProps}
+          >
+            <img
+              loading="lazy"
+              width="20"
+              srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
+              alt=""
+            />
+            {option.label} ({option.code}) +{option.phone}
+          </Box>
+        );
+      }}
       renderInput={(params) => (
         <TextField
           {...params}
diff --git a/docs/data/material/components/autocomplete/CountrySelect.tsx b/docs/data/material/components/autocomplete/CountrySelect.tsx
index 2f935b87367743..505e18f24462bc 100644
--- a/docs/data/material/components/autocomplete/CountrySelect.tsx
+++ b/docs/data/material/components/autocomplete/CountrySelect.tsx
@@ -11,18 +11,26 @@ export default function CountrySelect() {
       options={countries}
       autoHighlight
       getOptionLabel={(option) => option.label}
-      renderOption={(props, option) => (
-        <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
-          <img
-            loading="lazy"
-            width="20"
-            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
-            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
-            alt=""
-          />
-          {option.label} ({option.code}) +{option.phone}
-        </Box>
-      )}
+      renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
+        return (
+          <Box
+            key={key}
+            component="li"
+            sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+            {...optionProps}
+          >
+            <img
+              loading="lazy"
+              width="20"
+              srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
+              alt=""
+            />
+            {option.label} ({option.code}) +{option.phone}
+          </Box>
+        );
+      }}
       renderInput={(params) => (
         <TextField
           {...params}
diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOption.js b/docs/data/material/components/autocomplete/FreeSoloCreateOption.js
index 0a25bcf321e5b3..4c4d20ad68cf98 100644
--- a/docs/data/material/components/autocomplete/FreeSoloCreateOption.js
+++ b/docs/data/material/components/autocomplete/FreeSoloCreateOption.js
@@ -56,7 +56,14 @@ export default function FreeSoloCreateOption() {
         // Regular option
         return option.title;
       }}
-      renderOption={(props, option) => <li {...props}>{option.title}</li>}
+      renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
+        return (
+          <li key={key} {...optionProps}>
+            {option.title}
+          </li>
+        );
+      }}
       sx={{ width: 300 }}
       freeSolo
       renderInput={(params) => (
diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx b/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx
index d95cb137a1614d..ff7e52523be26b 100644
--- a/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx
+++ b/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx
@@ -56,7 +56,14 @@ export default function FreeSoloCreateOption() {
         // Regular option
         return option.title;
       }}
-      renderOption={(props, option) => <li {...props}>{option.title}</li>}
+      renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
+        return (
+          <li key={key} {...optionProps}>
+            {option.title}
+          </li>
+        );
+      }}
       sx={{ width: 300 }}
       freeSolo
       renderInput={(params) => (
diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js
index 22516f183d3bb1..ffccefc33aa8e1 100644
--- a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js
+++ b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js
@@ -87,7 +87,14 @@ export default function FreeSoloCreateOptionDialog() {
         selectOnFocus
         clearOnBlur
         handleHomeEndKeys
-        renderOption={(props, option) => <li {...props}>{option.title}</li>}
+        renderOption={(props, option) => {
+          const { key, ...optionProps } = props;
+          return (
+            <li key={key} {...optionProps}>
+              {option.title}
+            </li>
+          );
+        }}
         sx={{ width: 300 }}
         freeSolo
         renderInput={(params) => <TextField {...params} label="Free solo dialog" />}
diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx
index 779b26e26d6d17..5179e050b1dd73 100644
--- a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx
+++ b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx
@@ -87,7 +87,14 @@ export default function FreeSoloCreateOptionDialog() {
         selectOnFocus
         clearOnBlur
         handleHomeEndKeys
-        renderOption={(props, option) => <li {...props}>{option.title}</li>}
+        renderOption={(props, option) => {
+          const { key, ...optionProps } = props;
+          return (
+            <li key={key} {...optionProps}>
+              {option.title}
+            </li>
+          );
+        }}
         sx={{ width: 300 }}
         freeSolo
         renderInput={(params) => <TextField {...params} label="Free solo dialog" />}
diff --git a/docs/data/material/components/autocomplete/GitHubLabel.js b/docs/data/material/components/autocomplete/GitHubLabel.js
index 736811a4d81a35..9117f91608283e 100644
--- a/docs/data/material/components/autocomplete/GitHubLabel.js
+++ b/docs/data/material/components/autocomplete/GitHubLabel.js
@@ -214,51 +214,54 @@ export default function GitHubLabel() {
               disableCloseOnSelect
               renderTags={() => null}
               noOptionsText="No labels"
-              renderOption={(props, option, { selected }) => (
-                <li {...props}>
-                  <Box
-                    component={DoneIcon}
-                    sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
-                    style={{
-                      visibility: selected ? 'visible' : 'hidden',
-                    }}
-                  />
-                  <Box
-                    component="span"
-                    sx={{
-                      width: 14,
-                      height: 14,
-                      flexShrink: 0,
-                      borderRadius: '3px',
-                      mr: 1,
-                      mt: '2px',
-                    }}
-                    style={{ backgroundColor: option.color }}
-                  />
-                  <Box
-                    sx={(t) => ({
-                      flexGrow: 1,
-                      '& span': {
-                        color: '#8b949e',
-                        ...t.applyStyles('light', {
-                          color: '#586069',
-                        }),
-                      },
-                    })}
-                  >
-                    {option.name}
-                    <br />
-                    <span>{option.description}</span>
-                  </Box>
-                  <Box
-                    component={CloseIcon}
-                    sx={{ opacity: 0.6, width: 18, height: 18 }}
-                    style={{
-                      visibility: selected ? 'visible' : 'hidden',
-                    }}
-                  />
-                </li>
-              )}
+              renderOption={(props, option, { selected }) => {
+                const { key, ...optionProps } = props;
+                return (
+                  <li key={key} {...optionProps}>
+                    <Box
+                      component={DoneIcon}
+                      sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
+                      style={{
+                        visibility: selected ? 'visible' : 'hidden',
+                      }}
+                    />
+                    <Box
+                      component="span"
+                      sx={{
+                        width: 14,
+                        height: 14,
+                        flexShrink: 0,
+                        borderRadius: '3px',
+                        mr: 1,
+                        mt: '2px',
+                      }}
+                      style={{ backgroundColor: option.color }}
+                    />
+                    <Box
+                      sx={(t) => ({
+                        flexGrow: 1,
+                        '& span': {
+                          color: '#8b949e',
+                          ...t.applyStyles('light', {
+                            color: '#586069',
+                          }),
+                        },
+                      })}
+                    >
+                      {option.name}
+                      <br />
+                      <span>{option.description}</span>
+                    </Box>
+                    <Box
+                      component={CloseIcon}
+                      sx={{ opacity: 0.6, width: 18, height: 18 }}
+                      style={{
+                        visibility: selected ? 'visible' : 'hidden',
+                      }}
+                    />
+                  </li>
+                );
+              }}
               options={[...labels].sort((a, b) => {
                 // Display the selected labels first.
                 let ai = value.indexOf(a);
diff --git a/docs/data/material/components/autocomplete/GitHubLabel.tsx b/docs/data/material/components/autocomplete/GitHubLabel.tsx
index a5421b2dc736fb..c322f58b7e5352 100644
--- a/docs/data/material/components/autocomplete/GitHubLabel.tsx
+++ b/docs/data/material/components/autocomplete/GitHubLabel.tsx
@@ -222,51 +222,54 @@ export default function GitHubLabel() {
               disableCloseOnSelect
               renderTags={() => null}
               noOptionsText="No labels"
-              renderOption={(props, option, { selected }) => (
-                <li {...props}>
-                  <Box
-                    component={DoneIcon}
-                    sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
-                    style={{
-                      visibility: selected ? 'visible' : 'hidden',
-                    }}
-                  />
-                  <Box
-                    component="span"
-                    sx={{
-                      width: 14,
-                      height: 14,
-                      flexShrink: 0,
-                      borderRadius: '3px',
-                      mr: 1,
-                      mt: '2px',
-                    }}
-                    style={{ backgroundColor: option.color }}
-                  />
-                  <Box
-                    sx={(t) => ({
-                      flexGrow: 1,
-                      '& span': {
-                        color: '#8b949e',
-                        ...t.applyStyles('light', {
-                          color: '#586069',
-                        }),
-                      },
-                    })}
-                  >
-                    {option.name}
-                    <br />
-                    <span>{option.description}</span>
-                  </Box>
-                  <Box
-                    component={CloseIcon}
-                    sx={{ opacity: 0.6, width: 18, height: 18 }}
-                    style={{
-                      visibility: selected ? 'visible' : 'hidden',
-                    }}
-                  />
-                </li>
-              )}
+              renderOption={(props, option, { selected }) => {
+                const { key, ...optionProps } = props;
+                return (
+                  <li key={key} {...optionProps}>
+                    <Box
+                      component={DoneIcon}
+                      sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
+                      style={{
+                        visibility: selected ? 'visible' : 'hidden',
+                      }}
+                    />
+                    <Box
+                      component="span"
+                      sx={{
+                        width: 14,
+                        height: 14,
+                        flexShrink: 0,
+                        borderRadius: '3px',
+                        mr: 1,
+                        mt: '2px',
+                      }}
+                      style={{ backgroundColor: option.color }}
+                    />
+                    <Box
+                      sx={(t) => ({
+                        flexGrow: 1,
+                        '& span': {
+                          color: '#8b949e',
+                          ...t.applyStyles('light', {
+                            color: '#586069',
+                          }),
+                        },
+                      })}
+                    >
+                      {option.name}
+                      <br />
+                      <span>{option.description}</span>
+                    </Box>
+                    <Box
+                      component={CloseIcon}
+                      sx={{ opacity: 0.6, width: 18, height: 18 }}
+                      style={{
+                        visibility: selected ? 'visible' : 'hidden',
+                      }}
+                    />
+                  </li>
+                );
+              }}
               options={[...labels].sort((a, b) => {
                 // Display the selected labels first.
                 let ai = value.indexOf(a);
diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js
index 8f0327c5227592..a70d241612db37 100644
--- a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js
+++ b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js
@@ -14,21 +14,25 @@ const customTheme = (outerTheme) =>
     components: {
       MuiAutocomplete: {
         defaultProps: {
-          renderOption: (props, option, state, ownerState) => (
-            <Box
-              sx={{
-                borderRadius: '8px',
-                margin: '5px',
-                [`&.${autocompleteClasses.option}`]: {
-                  padding: '8px',
-                },
-              }}
-              component="li"
-              {...props}
-            >
-              {ownerState.getOptionLabel(option)}
-            </Box>
-          ),
+          renderOption: (props, option, state, ownerState) => {
+            const { key, ...optionProps } = props;
+            return (
+              <Box
+                key={key}
+                sx={{
+                  borderRadius: '8px',
+                  margin: '5px',
+                  [`&.${autocompleteClasses.option}`]: {
+                    padding: '8px',
+                  },
+                }}
+                component="li"
+                {...optionProps}
+              >
+                {ownerState.getOptionLabel(option)}
+              </Box>
+            );
+          },
         },
       },
     },
diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx
index 3ec3840e00292a..1e68b3116c830e 100644
--- a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx
+++ b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx
@@ -14,21 +14,25 @@ const customTheme = (outerTheme: Theme) =>
     components: {
       MuiAutocomplete: {
         defaultProps: {
-          renderOption: (props, option, state, ownerState) => (
-            <Box
-              sx={{
-                borderRadius: '8px',
-                margin: '5px',
-                [`&.${autocompleteClasses.option}`]: {
-                  padding: '8px',
-                },
-              }}
-              component="li"
-              {...props}
-            >
-              {ownerState.getOptionLabel(option)}
-            </Box>
-          ),
+          renderOption: (props, option, state, ownerState) => {
+            const { key, ...optionProps } = props;
+            return (
+              <Box
+                key={key}
+                sx={{
+                  borderRadius: '8px',
+                  margin: '5px',
+                  [`&.${autocompleteClasses.option}`]: {
+                    padding: '8px',
+                  },
+                }}
+                component="li"
+                {...optionProps}
+              >
+                {ownerState.getOptionLabel(option)}
+              </Box>
+            );
+          },
         },
       },
     },
diff --git a/docs/data/material/components/autocomplete/GoogleMaps.js b/docs/data/material/components/autocomplete/GoogleMaps.js
index cf8b62b09ae383..0287e024d5de19 100644
--- a/docs/data/material/components/autocomplete/GoogleMaps.js
+++ b/docs/data/material/components/autocomplete/GoogleMaps.js
@@ -113,6 +113,7 @@ export default function GoogleMaps() {
         <TextField {...params} label="Add a location" fullWidth />
       )}
       renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
         const matches =
           option.structured_formatting.main_text_matched_substrings || [];
 
@@ -120,7 +121,6 @@ export default function GoogleMaps() {
           option.structured_formatting.main_text,
           matches.map((match) => [match.offset, match.offset + match.length]),
         );
-        const { key, ...optionProps } = props;
         return (
           <li key={key} {...optionProps}>
             <Grid container sx={{ alignItems: 'center' }}>
diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/GoogleMaps.tsx
index 0679808313b0e8..b52bd46bd7f7ad 100644
--- a/docs/data/material/components/autocomplete/GoogleMaps.tsx
+++ b/docs/data/material/components/autocomplete/GoogleMaps.tsx
@@ -137,6 +137,7 @@ export default function GoogleMaps() {
         <TextField {...params} label="Add a location" fullWidth />
       )}
       renderOption={(props, option) => {
+        const { key, ...optionProps } = props;
         const matches =
           option.structured_formatting.main_text_matched_substrings || [];
 
@@ -144,7 +145,6 @@ export default function GoogleMaps() {
           option.structured_formatting.main_text,
           matches.map((match: any) => [match.offset, match.offset + match.length]),
         );
-        const { key, ...optionProps } = props;
         return (
           <li key={key} {...optionProps}>
             <Grid container sx={{ alignItems: 'center' }}>
diff --git a/docs/data/material/components/autocomplete/Highlights.js b/docs/data/material/components/autocomplete/Highlights.js
index 7d5c6950dcde81..12b34cdc5d37ef 100644
--- a/docs/data/material/components/autocomplete/Highlights.js
+++ b/docs/data/material/components/autocomplete/Highlights.js
@@ -14,11 +14,12 @@ export default function Highlights() {
         <TextField {...params} label="Highlights" margin="normal" />
       )}
       renderOption={(props, option, { inputValue }) => {
+        const { key, ...optionProps } = props;
         const matches = match(option.title, inputValue, { insideWords: true });
         const parts = parse(option.title, matches);
 
         return (
-          <li {...props}>
+          <li key={key} {...optionProps}>
             <div>
               {parts.map((part, index) => (
                 <span
diff --git a/docs/data/material/components/autocomplete/Highlights.tsx b/docs/data/material/components/autocomplete/Highlights.tsx
index 7d5c6950dcde81..12b34cdc5d37ef 100644
--- a/docs/data/material/components/autocomplete/Highlights.tsx
+++ b/docs/data/material/components/autocomplete/Highlights.tsx
@@ -14,11 +14,12 @@ export default function Highlights() {
         <TextField {...params} label="Highlights" margin="normal" />
       )}
       renderOption={(props, option, { inputValue }) => {
+        const { key, ...optionProps } = props;
         const matches = match(option.title, inputValue, { insideWords: true });
         const parts = parse(option.title, matches);
 
         return (
-          <li {...props}>
+          <li key={key} {...optionProps}>
             <div>
               {parts.map((part, index) => (
                 <span
diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.js b/docs/data/material/components/autocomplete/UseAutocomplete.js
index 7e6163da5ed7ab..ef1f3c66d697b8 100644
--- a/docs/data/material/components/autocomplete/UseAutocomplete.js
+++ b/docs/data/material/components/autocomplete/UseAutocomplete.js
@@ -63,9 +63,14 @@ export default function UseAutocomplete() {
       </div>
       {groupedOptions.length > 0 ? (
         <Listbox {...getListboxProps()}>
-          {groupedOptions.map((option, index) => (
-            <li {...getOptionProps({ option, index })}>{option.title}</li>
-          ))}
+          {groupedOptions.map((option, index) => {
+            const { key, ...optionProps } = { ...getOptionProps({ option, index }) };
+            return (
+              <li key={key} {...optionProps}>
+                {option.title}
+              </li>
+            );
+          })}
         </Listbox>
       ) : null}
     </div>
diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx b/docs/data/material/components/autocomplete/UseAutocomplete.tsx
index 0af0a01184ba2e..223663b23139bd 100644
--- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/data/material/components/autocomplete/UseAutocomplete.tsx
@@ -63,9 +63,14 @@ export default function UseAutocomplete() {
       </div>
       {groupedOptions.length > 0 ? (
         <Listbox {...getListboxProps()}>
-          {(groupedOptions as typeof top100Films).map((option, index) => (
-            <li {...getOptionProps({ option, index })}>{option.title}</li>
-          ))}
+          {(groupedOptions as typeof top100Films).map((option, index) => {
+            const { key, ...optionProps } = { ...getOptionProps({ option, index }) };
+            return (
+              <li key={key} {...optionProps}>
+                {option.title}
+              </li>
+            );
+          })}
         </Listbox>
       ) : null}
     </div>
diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview b/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview
index e53e8c231f0d5a..dd0cc2503e8d95 100644
--- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview
+++ b/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview
@@ -4,8 +4,13 @@
 </div>
 {groupedOptions.length > 0 ? (
   <Listbox {...getListboxProps()}>
-    {(groupedOptions as typeof top100Films).map((option, index) => (
-      <li {...getOptionProps({ option, index })}>{option.title}</li>
-    ))}
+    {(groupedOptions as typeof top100Films).map((option, index) => {
+      const { key, ...optionProps } = { ...getOptionProps({ option, index }) };
+      return (
+        <li key={key} {...optionProps}>
+          {option.title}
+        </li>
+      );
+    })}
   </Listbox>
 ) : null}
\ No newline at end of file
diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js
index ba0162eda8ef04..72c0cfa455bc3e 100644
--- a/docs/data/material/components/autocomplete/Virtualize.js
+++ b/docs/data/material/components/autocomplete/Virtualize.js
@@ -27,8 +27,10 @@ function renderRow(props) {
     );
   }
 
+  const { key, ...optionProps } = dataSet[0];
+
   return (
-    <Typography component="li" {...dataSet[0]} noWrap style={inlineStyle}>
+    <Typography key={key} component="li" {...optionProps} noWrap style={inlineStyle}>
       {`#${dataSet[2] + 1} - ${dataSet[1]}`}
     </Typography>
   );
diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx
index 7d7dab92ebd8c4..cfa2ccd1a91e93 100644
--- a/docs/data/material/components/autocomplete/Virtualize.tsx
+++ b/docs/data/material/components/autocomplete/Virtualize.tsx
@@ -26,8 +26,10 @@ function renderRow(props: ListChildComponentProps) {
     );
   }
 
+  const { key, ...optionProps } = dataSet[0];
+
   return (
-    <Typography component="li" {...dataSet[0]} noWrap style={inlineStyle}>
+    <Typography key={key} component="li" {...optionProps} noWrap style={inlineStyle}>
       {`#${dataSet[2] + 1} - ${dataSet[1]}`}
     </Typography>
   );

From 18520bf2a1139aa314b5b844054f4f172a756bb6 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 14:50:05 +0200
Subject: [PATCH 5/5] Remove unnecessary spread

---
 docs/data/material/components/autocomplete/UseAutocomplete.js   | 2 +-
 docs/data/material/components/autocomplete/UseAutocomplete.tsx  | 2 +-
 .../components/autocomplete/UseAutocomplete.tsx.preview         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.js b/docs/data/material/components/autocomplete/UseAutocomplete.js
index ef1f3c66d697b8..8ea6bf3811d61e 100644
--- a/docs/data/material/components/autocomplete/UseAutocomplete.js
+++ b/docs/data/material/components/autocomplete/UseAutocomplete.js
@@ -64,7 +64,7 @@ export default function UseAutocomplete() {
       {groupedOptions.length > 0 ? (
         <Listbox {...getListboxProps()}>
           {groupedOptions.map((option, index) => {
-            const { key, ...optionProps } = { ...getOptionProps({ option, index }) };
+            const { key, ...optionProps } = getOptionProps({ option, index });
             return (
               <li key={key} {...optionProps}>
                 {option.title}
diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx b/docs/data/material/components/autocomplete/UseAutocomplete.tsx
index 223663b23139bd..2e30c245fcf5a4 100644
--- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/data/material/components/autocomplete/UseAutocomplete.tsx
@@ -64,7 +64,7 @@ export default function UseAutocomplete() {
       {groupedOptions.length > 0 ? (
         <Listbox {...getListboxProps()}>
           {(groupedOptions as typeof top100Films).map((option, index) => {
-            const { key, ...optionProps } = { ...getOptionProps({ option, index }) };
+            const { key, ...optionProps } = getOptionProps({ option, index });
             return (
               <li key={key} {...optionProps}>
                 {option.title}
diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview b/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview
index dd0cc2503e8d95..10f7a19d40e215 100644
--- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview
+++ b/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview
@@ -5,7 +5,7 @@
 {groupedOptions.length > 0 ? (
   <Listbox {...getListboxProps()}>
     {(groupedOptions as typeof top100Films).map((option, index) => {
-      const { key, ...optionProps } = { ...getOptionProps({ option, index }) };
+      const { key, ...optionProps } = getOptionProps({ option, index });
       return (
         <li key={key} {...optionProps}>
           {option.title}