title: <select> should have {defaultValue} or {value} instead of setting {selected}
body: <p>I'm building an E-Commerce site with reactjs with styled-component.
  My page <strong>product.jsx</strong> that has the <code>&lt;select&gt;</code> element with different sizes of product <code>[XS,S,M,L,XL]</code> that causes error always shows this error upon render in console.dev:</p>
  <blockquote>
  <p>Warning: Use the <code>defaultValue</code> or <code>value</code> props on  instead of setting <code>selected</code> on .</p>
  </blockquote>
  <p>I tried this code right below before but it doesn't work as expected. I'm expecting to show the first element as disabled and shouldn't be selected at all:</p>
  <pre><code>&lt;Filter&gt;
    &lt;FilterTitle&gt;Size&lt;/FilterTitle&gt;
      &lt;FilterSize onChange={(e) =&gt; setSize(e.target.value)}&gt;
          {product.size?.map((s) =&gt; (
                &lt;FilterSizeOption key={s}&gt;{s}&lt;/FilterSizeOption&gt;
          ))}
    &lt;/FilterSize&gt;
  &lt;/Filter&gt;
  </code></pre>
  <hr />
  <p>Please help me fix this code below not the above one.</p>
  <p><strong>product.jsx</strong> code:</p>
  <pre><code>const FilterSize = styled.select`
    margin-left: 10px;
    padding: 5px;
    cursor: pointer;
    outline: 0px;
    font-size: inherit;
  `;
  const FilterSizeOption = styled.option``;
  
  //...
  
  &lt;Filter&gt;
      &lt;FilterTitle&gt;Size&lt;/FilterTitle&gt;
      &lt;FilterSize onChange={(e) =&gt; setSize(e.target.value)}&gt;
           &lt;FilterSizeOption selected={true} disabled=&quot;disabled&quot;&gt;
                Choose a size:
           &lt;/FilterSizeOption&gt;
           {product?.product?.size.map((s) =&gt; (
                &lt;FilterSizeOption key={s} value={s}&gt;
                     {s}
                &lt;/FilterSizeOption&gt;
           ))}
      &lt;/FilterSize&gt;
  &lt;/Filter&gt;
  </code></pre>