title: Filter options material-ui autocomplete
body: <p>I'm using ReactJs, Material-UI autocomplete with <strong>20000 options</strong> for select. Each option represented as object with portfolio, country and assetType.</p>
  <pre> const options = [{portfolio: 'test_index', country: 'Austria', assetType: 'index'},
   { portfolio: 'Italy $1M Turnover StdTurn btm 10 Middle of Quarter LCL', country: 'Italy', assetType: 'portfolio'},
   { portfolio: 'Israel $1M Turnover StdTurn top 20 Middle of Quarter LCL', country: 'Italy', assetType: 'portfolio'},
   { portfolio: 'United States $1M Turnover ROE top 20 Middle of Quarter LCL', country: 'Italy', assetType: 'portfolio'}] </pre>
  <p>I need to filter options by '<strong>portfolio</strong>'. Filter should work like contain.
  Such that if type <em>Italy Middle</em> or <em>Middle Italy</em> i get this responce 'Italy $1M Turnover StdTurn btm 10 Middle of Quarter LCL'</p>
  <p>Material-ui recommend several options : createFilterOptions and <a href="https://github.com/kentcdodds/match-sorter" rel="nofollow noreferrer">match-sorter</a></p>
  <ul>
  <li>match-sorter work very slow with a huge amount of data. Also if you change order of the words like <em>Middle Italy</em> search does not work.</li>
  <li>createFilterOptions does not work like contain.
  Autocomplete looks like following:</li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;Autocomplete
        filterOptions={filterOptions}
        size="small"
        id="assets_async_autocmplete"
        className={classes.root}
        disableListWrap
        sx={{ width: 365 }}
        open={open}
        PopperComponent={StyledPopper}
        ListboxComponent={ListboxComponent}
        onOpen={() =&gt; {
          setOpen(true);
        }}
        onClose={() =&gt; {
          setOpen(false);
        }}
        isOptionEqualToValue={(option, value) =&gt; option === value}
        getOptionLabel={(option) =&gt; option.portfolio}
        options={options}
        loading={loading}
        renderOption={(props, option) =&gt; (
          &lt;Stack
            key={option.portfolio}
            justifyContent="center"
          &gt;
            &lt;SearchRowContainer saveAssetId={saveAssetId} props={props} favorites={favorites} option={option} /&gt;
            &lt;hr className={style.delimeter} /&gt;
          &lt;/Stack&gt;
        )}
        renderInput={(params) =&gt; (
          &lt;RenderInput params={params} loading={loading} /&gt;
        )}
        popupIcon={&lt;GlassIcon /&gt;}
      /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Can anybody suggest efficient way\library to filter the options.
  Thanks in advance</p>