title: select isn't updating when using a component jsx react-js
body: <p>I've got two select inputs that have a list of many countries. I put this list into one select component so I only needed to write one line in the parent component - like so</p>
  <p>Child component:</p>
  <pre><code>const SelectCountry = props =&gt; {
   &lt;select name={props.name} value={props.value} placeholder=&quot;Nationality&quot;.....&gt;
     &lt;option ...../&gt;
     (etc.)
   &lt;/select&gt;
  }
  </code></pre>
  <p>Parent component:</p>
  <pre><code>&lt;SelectCountry name={&quot;nationalityA&quot;} value={values.nationalityA} /&gt;
  .....
  .....
  &lt;SelectCountry name={&quot;nationalityB&quot;} value={values.nationalityB} /&gt;
  </code></pre>
  <p>This works fine except for when I make an API call and try to prepopulate the selects with the values returned from the API. For some reason, the values don't change in the SelectCountry component if I set the values for nationalityA and nationalityB as what was returned from the API. If I add the following into the parent component however the value from the API call displays:</p>
  <pre><code>&lt;select name=&quot;nationalityA&quot; value={values.nationalityA} placeholder=&quot;Nationality&quot;.....&gt;
     &lt;option ...../&gt;
     (etc.)
   &lt;/select&gt;
  
  .....
  
  &lt;select name=&quot;nationalityB&quot; value={values.nationalityB} placeholder=&quot;Nationality&quot;.....&gt;
     &lt;option ...../&gt;
     (etc.)
   &lt;/select&gt;
  
  </code></pre>
  <p>For the API call itself, I am making it within a custom UseForm hook and then setValues({}) in there so the input fields are prepopulated</p>
  <p>I wanted to keep the code clean so would rather the select country was in one component. What do I need to do?</p>