title: React JSX: selecting “selected” on selected <select> option with default option have issues
body: <p>I know, there is one related question at <a href="https://stackoverflow.com/questions/21733847/react-jsx-selecting-selected-on-selected-select-option">Stackoverflow Link</a></p>
  <ul>
  <li>But I'm facing issues with setting <code>defaultValue</code>.</li>
  <li><code>value</code> with <code>onChange</code> works</li>
  <li>Even with <code>defaultValue=&quot;m&quot;</code> or <code>defaultValue=&quot;f&quot;</code> also works</li>
  <li>But while setting defaultValue dynamically is not working.</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>// value of member.gender is 'f' and confirmed from console.log
  &lt;div className=&quot;col-3&quot;&gt;
    &lt;select name=&quot;gender&quot; id=&quot;id_gender&quot; defaultValue={member.gender}&gt;
      &lt;option value=&quot;m&quot; &gt;Male&lt;/option&gt;
      &lt;option value=&quot;f&quot;&gt;Female&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  <ul>
  <li>value of <code>member.gender</code> is <code>&quot;f&quot;</code> but always <code>Male</code> i.e. first option gets selected.</li>
  <li>tried to quote {member.geder} using <code>&quot;${member.gender}&quot;</code> enclosed in ticks not working.</li>
  <li>I'm using <code>useRef</code> based approach, to let form behave as an uncontrolled component. Therefore need to provide defaultValue to select element.</li>
  </ul>