title: candidate.toLowerCase is not a function. (In 'candidate.toLowerCase()', 'candidate.toLowerCase' is undefined) Material UI
body: <p>I am using <code>AutoComplete API</code> of material UI. there is an object of <strong>top100Films</strong> which contains the title and year of movies. My autocomplete works fine if i search with <code>top100Film.title</code> as shown in code</p>
  <pre><code>&lt;Autocomplete
    id=&quot;combo-box-demo&quot;
    options={top100Films}
    getOptionLabel={(option) =&gt; option.title} // &lt;--
    style={{ width: 300 }}
    renderInput={(params) =&gt; &lt;TextField {...params} label=&quot;Combo box&quot; variant=&quot;outlined&quot; /&gt;}
  /&gt;
  </code></pre>
  <p>But if i want to search the movies with <code>top100Films.year</code> then i get an error message</p>
  <pre><code>&lt;Autocomplete
    id=&quot;combo-box-demo&quot;
    options={top100Films}
    getOptionLabel={(option) =&gt; option.year}//&lt;--
    style={{ width: 300 }}
    renderInput={(params) =&gt; &lt;TextField {...params} label=&quot;Combo box&quot; variant=&quot;outlined&quot; /&gt;}
  /&gt;
  </code></pre>
  <p><em>candidate.toLowerCase is not a function. (In 'candidate.toLowerCase()', 'candidate.toLowerCase' is undefined)</em></p>
  <p>How can i use any other data field except <code>.title</code></p>
  <p>the code is in <a href="https://codesandbox.io/s/material-demo-forked-xots5" rel="nofollow noreferrer">Link</a></p>