[material-ui][Autocomplete] Grouped options demo has console errors in Next.js

[MSturges]

Steps to reproduce 🕹

Link to live example: https://mui.com/material-ui/react-autocomplete/#grouped

using nextjs

It works but I see this in my console

app-index.js:31 Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, tabIndex: ..., role: ..., id: ..., onMouseMove: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: ..., aria-selected: ..., className: ..., children: ...};
  <li {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {tabIndex: ..., role: ..., id: ..., onMouseMove: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: ..., aria-selected: ..., className: ..., children: ...};
  <li key={someKey} {...props} />
    at Autocomplete (webpack-internal:///(app-pages-browser)/../../node_modules/@mui/material/Autocomplete/Autocomplete.js:405:83)
    at RenderGroup

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mj12albert]

@MSturges Could you share a repro? I couldn't reproduce this in a sandbox: https://codesandbox.io/p/sandbox/https-github-com-mui-material-ui-issues-39474-kdgq9g?file=%2Fsrc%2Fapp%2Fpage.tsx%3A28%2C2 (it's that exact demo copy+pasted into a Next.js setup without modification)

[HaoboZ]

@MSturges Could you share a repro? I couldn't reproduce this in a sandbox: https://codesandbox.io/p/sandbox/https-github-com-mui-material-ui-issues-39474-kdgq9g?file=%2Fsrc%2Fapp%2Fpage.tsx%3A28%2C2 (it's that exact demo copy+pasted into a Next.js setup without modification)

I'm seeing this as well on my project and on the codesandbox you linked. It only shows up once you open the autocomplete

[digibake]

Hi,

Yes I'm seeing the warning as well. Here's a screenshot of the error as it appears in Chrome developer tools console

[mj12albert]

Next.js doesn't like the key prop being spread: vercel/next.js#55642

I've opened a PR for the fix, sandbox: https://codesandbox.io/p/sandbox/https-github-com-mui-material-ui-pull-39795-fwdm7f?file=%2Fsrc%2Fapp%2Fpage.tsx%3A1%2C1