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 90168362e2f93d..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,9 +121,8 @@ export default function GoogleMaps() {
           option.structured_formatting.main_text,
           matches.map((match) => [match.offset, match.offset + match.length]),
         );
-
         return (
-          <li {...props}>
+          <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 1b855645eed1a9..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,9 +145,8 @@ export default function GoogleMaps() {
           option.structured_formatting.main_text,
           matches.map((match: any) => [match.offset, match.offset + match.length]),
         );
-
         return (
-          <li {...props}>
+          <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/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..8ea6bf3811d61e 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..2e30c245fcf5a4 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..10f7a19d40e215 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>
   );