title: How can I control the defaultValue of the select box by stage using React-Select?
body: <pre><code>let params = {
      &quot;grade&quot; : 1,
      &quot;time&quot; : 1,
  }
  
  
  function Calculator () {
  
      const options1 = [
          { value: 1, label:'example01'},
          { value: 2, label:'example02'},
      ]
  
      const options2_1 = [
          { value: 1, label:'example01-1'},
          { value: 2, label:'example01-2'}
      ]
      
      const options2_2 = [
          { value: 1, label:'example02-1'},
          { value: 2, label:'example02-2'}
      ]
  
      const [timeOption, setTimeOption] = useState(options2_1)
  
      function changeOption(data, info) {
          let selectName = info.name
          let selectValue = data.value
          if (selectValue === 1) {
              setTimeOption(options2_1)
          }
          else if (selectValue === 2) {
              setTimeOption(options2_2)
          }
  
  
  return (&lt;div&gt;
   &lt;div className=&quot;select_wrap&quot;&gt;
        &lt;Select options={options1} className='calc' defaultValue={options1[0]} classNamePrefix='calc' isSearchable={ false } name={&quot;grade&quot;}  onChange={changeOption}/&gt;
        &lt;Select options={timeOption} className='calc' defaultValue={options2_1[0]} classNamePrefix='calc' isSearchable={ false } name={&quot;time&quot;}  /&gt;
  &lt;/div&gt;
  &lt;/div&gt;)}
  </code></pre>
  <p>I want the option of the second select to change according to the selection value of the first select.
  This will change the options of the second select, but not the defaultValue. (If click the defaultValue that is not changed, the option contents are changed.) If change defaultValue to value, the first selection value is changed, but option selection is not possible. Is there a way to make the defaultValue of the second select change automatically depending on the selected value of the first select?</p>