title: Material-UI - TypeScript - Autocomplete with getOptionLabel and renderOption
body: <p>I am trying to display <code>member</code> and <code>company</code> using  MUI <code>Autocomplete</code>.</p>
  <p>I have <code>suggestion</code> array to show as <code>options</code></p>
  <pre><code>[
      {
          &quot;__typename&quot;: &quot;Member&quot;,
          &quot;id&quot;: &quot;ckwa91sfy0sd241b4l8rekas9jx&quot;,
          &quot;name&quot;: &quot;my name 2&quot;,
          &quot;companyName&quot;: &quot;&quot;
      },
      {
          &quot;__typename&quot;: &quot;Member&quot;,
          &quot;id&quot;: &quot;ckwac4ijl25dsd80b4l8fpsrc64o&quot;,
          &quot;name&quot;: &quot;my name&quot;,
          &quot;companyName&quot;: &quot;&quot;
      },
      {
          &quot;__typename&quot;: &quot;Member&quot;,
          &quot;id&quot;: &quot;ckwa8z6z7004dsd2b4l81m6ras9c&quot;,
          &quot;name&quot;: &quot;my name 1&quot;,
          &quot;companyName&quot;: &quot;A COMPANY&quot;
      }
  ]
  
  </code></pre>
  <p>I use this to display</p>
  <pre><code> &lt;Autocomplete
                                          id=&quot;free-solo-demo&quot;
                                          freeSolo
                                          options={
                                              suggestion &amp;&amp;
                                              suggestion.map(
                                                  (suggestion: any) =&gt;
                                                      suggestion.name
                                              )
                                          }
                                          onChange={(event, value) =&gt;
                                              HandleUserProfile(value)
                                          }
                                          renderInput={(params) =&gt; (
                                              &lt;TextField
                                                  {...params}
                                                  placeholder=&quot;Search...&quot;
                                                  onChange={handleChange}
                                              /&gt;
                                          )}
                                      /&gt;
  </code></pre>
  <p>By using this I am getting options if only I search with <code>member</code> name.</p>
  <p>I want to search with both <code>company</code> and <code>member</code> and need to customize UI of  option.</p>
  <p>I tried this</p>
  <pre><code> &lt;Autocomplete
                                          id=&quot;free-solo-demo&quot;
                                          freeSolo
                                          options={suggestion}
                                          getOptionLabel={(option) =&gt; `${option.name}  ${option.companyName}`}
                                          renderOption={(option)=&gt;{
                                              return &lt;h1&gt;{`${option.name}: ${option.companyName}`}&lt;/h1&gt;
                                          }}
                                          onChange={(event, value) =&gt;
                                              HandleUserProfile(value)
                                          }
                                          renderInput={(params) =&gt; (
                                              &lt;TextField
                                                  {...params}
                                                  placeholder=&quot;Search...&quot;
                                                  onChange={handleChange}
                                              /&gt;
                                          )}
                                      /&gt;
  
  </code></pre>
  <p>but It is not working.
  it shows error <code>TypeScript error in ... Property 'name' does not exist on type 'never'.  TS2339 </code></p>