Material-ui: Autocomplete grouBy + virtualization example, wrong groups

[Janpot]

Checking the example of autocomplete + virtualization. The groups are supposed to be the first letter of the item but they seem to be kind of random. See gif:

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When you open the autocomplete, first group seems to always be 0, but then subsequent groups seem to be off

Expected Behavior 🤔

Item groups are named correctly

Steps to Reproduce 🕹

see gif

Context 🔦

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.11 |

[Janpot]

diff --git a/docs/src/pages/components/autocomplete/Virtualize.tsx b/docs/src/pages/components/autocomplete/Virtualize.tsx
index 2785133cb..92d571a60 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.tsx
+++ b/docs/src/pages/components/autocomplete/Virtualize.tsx
@@ -110,7 +110,7 @@ const OPTIONS = Array.from(new Array(10000))

 const renderGroup = (params: RenderGroupParams) => [
   <ListSubheader key={params.key} component="div">
-    {params.key}
+    {params.group}
   </ListSubheader>,
   params.children,
 ];

[oliviertassinari]

@Janpot Well spotted, we have made a change to the args of renderGroup recently. We need to fix it :).

[Janpot]

@oliviertassinari off-topic, what's your workflow for generating these diffs?

[oliviertassinari]

@Janpot I edit them in my locale env, check that it works, run git diff, copy, reset hard to master.

[Uneetpatel7]

I would love to submit a PR for this issue

[oliviertassinari]

@Uneetpatel7 Feel free to :)