title: React Material-UI Select is not reflecting the change
body: <p>I have a list of objects with product data:</p>
  <pre><code>[
      {
          barcode: &quot;21METAHTAM29RM&quot;
          discount: 0
          price: &quot;359990&quot;
          qty: &quot;2&quot;
          size: &quot;m&quot;
      },
      {
          barcode: &quot;21METAHTAM29RL&quot;
          discount: 0
          price: &quot;359990&quot;
          qty: &quot;1&quot;
          size: &quot;l&quot;
      },
      ...
  ]
  </code></pre>
  <p>I use <code>size</code> field to show the option from which you can select the product size:</p>
  <pre><code>...
  
  const [prodDetails, setProdDetails] = useState({});
  
  const handleChange = (event) =&gt; {
      var specificProd = JSON.parse(event.target.value)
      setProdDetails(specificProd)
  };
  
  ...
  
  &lt;FormControl className={classes.sizes}&gt;
      &lt;InputLabel htmlFor='size-select'&gt;SIZE&lt;/InputLabel&gt;
      &lt;Select
          id='size-select'
          native
          value={prodDetails.size}
          onChange={handleChange}
      &gt;
         {newProd[0].sizepricesdiscountqty.map((item, i)=&gt;{
             if(parseInt(item.qty) &gt; 0){
                 return &lt;option key={i} value={JSON.stringify(item)}&gt;
                     {item.size.toUpperCase()}
                 &lt;/option&gt;
             } else {
                 return &lt;option disabled key={i}&gt;
                     {item.size.toUpperCase()} (OUT OF STOCK)
                 &lt;/option&gt;
             }
         })}
      &lt;/Select&gt;
  &lt;/FormControl&gt;
  </code></pre>
  <p>I enable or disable the option depending on qty field. The reason I pass value as an object is that multiple changes can happen:
  <a href="https://i.stack.imgur.com/JMYsz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JMYsz.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/lz3wb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lz3wb.png" alt="enter image description here" /></a></p>
  <p>In a picture you can see barcode change rendered successfully from <code>21METAHTAM29RL</code> to <code>21METAHTAM29RM</code> but not the size.</p>
  <p>In similar threads I saw that <code>defaultValue</code> can be used instead of <code>value</code> in <code>Select</code> component and that would actually reflect the change, but it comes with all sorts of other problems. Specifically when I pick another product the filter i use to set the value to product that has qty higher than 0 won't work:</p>
  <pre><code>useEffect(()=&gt;{
     setNewProd(product)
     if(product.length &gt; 0){
        for(var i = 0; i &lt; product[0].sizepricesdiscountqty.length; i++){
           if(parseInt(product[0].sizepricesdiscountqty[i].qty) &gt; 0){
              setProdDetails(product[0].sizepricesdiscountqty[i])
              break;
           }
        }
     }
  },[product])
  </code></pre>
  <p>It won't respect the filtering and the <code>defaultValue</code> will not show the product that was actually set.
  Using <code>value</code> instead of <code>defaultValue</code> will respect the filtering and set the first product that has <code>qty</code> higher than 0.</p>
  <p>I don't quite understand how are defaultValue and value different from each other. I tried using them both at the same time, but the change would not reflect either.
  I don't know how to make Select component rerender successfully on change and respecting the filtering. Any ideas?</p>