title: React Material UI - How to automatically remove items from an Autocomplete depending on another value
body: <p>I have 2 select boxes that i am building uisng the autocomplete component in material ui - <a href="https://mui.com/material-ui/react-autocomplete/#checkboxes" rel="nofollow noreferrer">https://mui.com/material-ui/react-autocomplete/#checkboxes</a></p>
  <p>I have a edge case im trying to fix:</p>
  <ol>
  <li>A user selects both &quot;Consumer Electronics&quot; and &quot;Fashion &amp; Apparel&quot; in the first main industries select box.</li>
  <li>A user then selects in the second sub industries select box, &quot;Computer &amp; Laptops&quot; and &quot;Eyewear&quot;. (1 from each group).</li>
  <li>If a user then removes &quot;Fashion &amp; Apparel&quot; from the first select box, all of the items that were selected with that category should be removed in the second select box.</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/8IbDU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8IbDU.png" alt="enter image description here" /></a></p>
  <p><strong>example:</strong></p>
  <p><a href="https://codesandbox.io/s/checkboxestags-demo-material-ui-forked-qox19g?file=/demo.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/checkboxestags-demo-material-ui-forked-qox19g?file=/demo.tsx</a></p>
  <p>You can see in the second &quot;Autocomplete&quot; im using the &quot;filterOptions&quot; to only show options depending on the first &quot;Autocomplete&quot;</p>
  <p>also see data.json in the example for the raw data.</p>
  <p><strong>code:</strong></p>
  <pre><code>    return (
        &lt;Autocomplete
          multiple
          options={subIndustries}
          filterOptions={(x) =&gt;
            x.filter((x) =&gt;
              getValues(&quot;main_industries&quot;).find((m) =&gt; m.name === x.category)
            )
          }
          groupBy={(option) =&gt; option.category}
          disableCloseOnSelect
          getOptionLabel={(option) =&gt; option.name}
          onChange={(_, newValue: any) =&gt; {
            setValue(&quot;sub_industries&quot;, newValue, { shouldValidate: true });
          }}
          defaultValue={getValues(&quot;sub_industries&quot;)}
          onInputChange={(_, val) =&gt; {
            console.log(val);
          }}
          renderOption={(props, option, { selected }) =&gt; (
            &lt;li {...props}&gt;
              &lt;Checkbox
                icon={uncheckedIcon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              /&gt;
              {option.name}
            &lt;/li&gt;
          )}
          renderInput={(params) =&gt; (
            &lt;TextField
              {...params}
              label=&quot;Sub Industries&quot;
              placeholder=&quot;Sub Industries&quot;
            /&gt;
          )}
        /&gt;
      );
    };
  </code></pre>