title: groupBy autocomplete sorting of options in material ui
body: <p>I am using material ui Autocomplete and react for generating grouped autocomplete dropdown.</p>
  <p>Below is the data</p>
  <pre><code>let top100Films = [
    { title: &quot;The Shawshank Redemption&quot;, genre: &quot;thriller&quot; },
    { title: &quot;The Dark Knight&quot;, genre: &quot;super hero&quot; },
    { title: &quot;The Godfather: Part II&quot;, genre: &quot;thriller&quot; },
    { title: &quot;12 Angry Men&quot;, genre: &quot;war&quot; },
    { title: &quot;Schindler's List&quot;, genre: &quot;war&quot; },
    { title: &quot;superman&quot;, genre: &quot;super hero&quot; },
    { title: &quot;The Godfather&quot;, genre: &quot;thriller&quot; },
    {
      title: &quot;The Lord of the Rings: The Return of the King&quot;,
      genre: &quot;adventure&quot;
    }
  ];
  </code></pre>
  <p>I want sort by first by genre and then title. I am able to sort by genre but not able to sort by title
  Below is the code</p>
  <pre><code>import * as React from &quot;react&quot;;
  import TextField from &quot;@mui/material/TextField&quot;;
  import Autocomplete from &quot;@mui/material/Autocomplete&quot;;
  
  export default function Grouped() {
    top100Films = top100Films.sort((a, b) =&gt;
      a.genre.toLowerCase() &gt; b.genre.toLowerCase() ? 1 : -1
    );
    return (
      &lt;Autocomplete
        id=&quot;grouped-demo&quot;
        options={top100Films}
        groupBy={(option) =&gt; option.genre}
        getOptionLabel={(option) =&gt; option.title}
        sx={{ width: 300 }}
        renderInput={(params) =&gt; (
          &lt;TextField {...params} label=&quot;With categories&quot; /&gt;
        )}
      /&gt;
    );
  }
  
  // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
  
  let top100Films = [
    { title: &quot;The Shawshank Redemption&quot;, genre: &quot;thriller&quot; },
    { title: &quot;The Dark Knight&quot;, genre: &quot;super hero&quot; },
    { title: &quot;The Godfather: Part II&quot;, genre: &quot;thriller&quot; },
    { title: &quot;12 Angry Men&quot;, genre: &quot;war&quot; },
    { title: &quot;Schindler's List&quot;, genre: &quot;war&quot; },
    { title: &quot;superman&quot;, genre: &quot;super hero&quot; },
    { title: &quot;The Godfather&quot;, genre: &quot;thriller&quot; },
    {
      title: &quot;The Lord of the Rings: The Return of the King&quot;,
      genre: &quot;adventure&quot;
    }
  ];
  </code></pre>
  <p>Below is the link to codesandox</p>
  <p><a href="https://codesandbox.io/s/grouped-autocomplete-options-sorting-zrsb34?file=/demo.js:663-1132" rel="nofollow noreferrer">https://codesandbox.io/s/grouped-autocomplete-options-sorting-zrsb34?file=/demo.js:663-1132</a></p>
  <p>How do I achieve it.</p>
  <p>Thanks in advance!</p>