title: Material UI Autocomplete show suggestions in table format with header attached to it
body: <p>I am trying to implement a Material UI Autocomplete and the requirement is to show the suggestions in a table format with a header that specify the column names. Check the below image to understand the requirement:</p>
  <p><a href="https://i.stack.imgur.com/Ik4Lr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ik4Lr.png" alt="enter image description here" /></a></p>
  <p>I have tried the following code:</p>
  <pre><code>&lt;Autocomplete
    id=&quot;free-solo-demo&quot;
    freeSolo
    disableClearable
    options={top100Films}
    renderInput={(params) =&gt; (
      &lt;TextField {...params} label=&quot;Combo box&quot; variant=&quot;outlined&quot; /&gt;
    )}
    getOptionLabel={(option) =&gt; option.title}
    renderOption={(option) =&gt; (
      &lt;React.Fragment&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th style={{ width: &quot;400&quot; }}&gt;Name&lt;/th&gt;
              &lt;th style={{ width: &quot;60&quot; }}&gt;Year&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;{option.title}&lt;/td&gt;
              &lt;td&gt;{option.year}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/React.Fragment&gt;
    )}
  /&gt;
  </code></pre>
  <p>But it is creating a different table for every <code>renderOption</code> as it runs for every object in the array. The main issue I am facing here is I am not able to use <code>renderOption</code> to generate the table body only and then wrap it inside a table.</p>
  <p>Please help me to handle this. Thanks in advance.</p>
  <p>Working Sandbox <a href="https://codesandbox.io/s/material-demo-forked-vmni4?file=/demo.js" rel="nofollow noreferrer">URL</a></p>