[material-ui][Autocomplete] Fix more React 18.3 key spread warnings in demos

[wbt]

Note: the PR has expanded to solve all errors in all Autocomplete demos, not only the Google Maps demo as the original PR description explained.

---

When using the demo code for autocomplete with Google Maps, there is an error thrown which seems to be discussed in other issues with respect to other broken examples, but I don't see a solution in place yet.
This addresses the Google Maps example only. There are probably other examples that should be updated too, but getting this merged seems like a positive step forward even if there are other positive steps forward that can follow.

Examples of issues closed as incomplete without a solution that seem to be reporting a similar error, especially with NextJS and React 18.3+:

• [material-ui][Autocomplete] React keys being passed directly to JSX without using spread #41486
• [Autocomplete] Console error in Next.js App Router project: A props object containing a "key" prop is being spread into JSX #41035
• [joy-ui][Autocomplete] Console error in Next.js about key prop being spread into JSX  #40905
• [examples] Next.js + Tailwind warning: "A props object containing a "key" prop is being spread into JSX" #39966
• [material-ui][Autocomplete] Grouped options demo has console errors in Next.js #39474
• Autocomplete not working with NextJS app directory #38272

This is still open:

• react 18.3.0 "A props object containing a "key" prop is being spread into JSX" #39833

The issue appears to have been partially addressed in

• [Autocomplete][material-ui] Fix React key warning in Next.js #39795
• [autocomplete] Avoid spread operator #40968

but this particular issue is still in the latest, so here's a step to fix it.

This borrows from #39833 (comment) in place of a slightly less elegant earlier draft.

[mui-bot]

Netlify deploy preview

https://deploy-preview-42639--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 18520bf

[wbt]

It looks like I can't add a label on the PR as is required by test, and the GitHub editor doesn't apply prettier settings.

[ZeeshanTamboli]

@wbt Can you provide a live reproduction first of the error in CodeSandbox or StackBlitz?

[wbt]

It looks like that requires setting up a special billing account, getting an API key, and possibly breaking pseudonymity in open-source contributions more broadly just to re-demonstrate an issue that has several existing reports already. The existing example code does not need to be modified to demonstrate the issue; it appears that using it as-is in a project with React 18.3+ and your own API key would likely suffice to show it, assuming that NONE of the other issue reports appear credible.

For quick setup close to the context where I saw it, I recommend running npx create-next-app@latest in an empty directory, with default options. Add the original and/or modified file affected by this PR into /components, paste in your API key on line 13, and then import/add it onto the default page.tsx that you get with the new Next app. Make sure your key allows requests from http://localhost:3000 or has no referrer restriction.

[m4theushw]

The demo in https://mui.com/material-ui/react-autocomplete/#globally-customized-options also has the same problem with the key prop. I was playing with passing a custom renderOption to Autocomplete and saw the error.

[ZeeshanTamboli]

I saw other Autocomplete demos were updated in #42691. Maybe we need to update this one and this one as well? I'll leave this PR to be reviewed by @aarongarciah and @DiegoAndai since they have more context.

[aarongarciah]

We'll hold this PR until #42689 is merged so we get the correct types.

Note that React 18.3.0 started to throw warnings when spreading key. It's not Material UI specific (see https://github.com/facebook/react/releases/tag/v18.3.0). We're fixing the issues as we find them.

This error, and the one in GloballyCustomizedOptions.tsx mentioned by @m4theushw, were harder to catch than the ones fixed in #42691 because these warnings only happen at runtime and the Google Maps demo didn't throw the warning until there are results, which is not the case if you don't have an API key 😅

I see that there are more warnings that we didn't catch because they are fired when the autocomplete is open and renderOption is called. I'll push the fixes to this PR so we merge them all at once.

---

@wbt when a demo is modified (the .tsx file), you need to run pnpm docs:typescript to generate the corresponding .js file.

[aarongarciah]

Just pushed a commit that should solve all React warnings related to spreading key in Autocomplete demos. The test_types CI check will fail until we rebase on to of next once #42689 is merged.

I recommend reviewing this PR with the "Hide whitespace" option enabled.

See how to enable it

[ZeeshanTamboli]

@aarongarciah I hope you don't mind the review. I was just scrolling through and found this.

[aarongarciah]

I just rebased to get the latest typing fixes from #42689

[DiegoAndai]

✨