title: Error select based on selection from 1st select in React Hooks and dinamically inputs
body: <p>I have two selects and I want to populate the second select base in the selection of the first one in react.  When I select a countrie I want a select2 be displayed with its states and the value on the second select be updated with the value chose.</p>
  <p>I have the following code,</p>
  <pre><code>const MyForm = (props) =&gt; {    
      const COUNTRIES = [
          {
              displayValue: &quot;Country1&quot;,
              value: &quot;C1&quot;
          },
          {
              displayValue: &quot;Country2&quot;,
              value: &quot;C2&quot;
          }
      ]        
      const STATES = {
          &quot;&quot;: [ {
              displayValue: &quot;&quot;,
              value: &quot;&quot;
          }],
          &quot;C1&quot;: [{
              displayValue: &quot;State 1&quot;,
              value: &quot;S11&quot;
          },
          {
              displayValue: &quot;State 2&quot;,
              value: &quot;S12&quot;
          }],
          &quot;C2&quot;: [{
              displayValue: &quot;State n1&quot;,
              value: &quot;C21&quot;
          },
          {
              displayValue: &quot;STate n2&quot;,
              value: &quot;C22&quot;
          }]
      }    
      let inputsForms = {
        country: {
            elementType: 'select',
            elementConfig: {
                type: 'select',
                placeholder: '',
                options: COUNTRIES,
                firstOption: &quot;-- Choose Country&quot;
            },
            value: ''
        },
        states: {
          elementType: 'select',
          elementConfig: {
              type: 'select',
              placeholder: '',
              options: [], // I need these options depend on the countrie selected  STATES[&quot;C1&quot;]
              firstOption: &quot;-- Choose States&quot;
          },
          value: ''
      }      
    }
          
    const [myForm, setmyForm] = useState(inputsForms);
  
    const updateObject = (oldObject, updatedProperties) =&gt; {
          return {
              ...oldObject,
              ...updatedProperties
          };
      };  
    
    const inputChangedHandler = (e, controlName) =&gt; {
      const countrieValue = controlName ===&quot;country&quot;?e.target.value:&quot;&quot;;
      const stateOptions = myForm[&quot;states&quot;].elementConfig;
      stateOptions[&quot;options&quot;] = STATES[countrieValue];
  
        const updatedControls = updateObject(myForm, {
            [controlName]: updateObject(myForm[controlName], {
              value: e.target.value
            })
          });
  
          setmyForm(updatedControls);
  
    }
  
  
    const ElementsArray = [];
    for (let key in myForm) {
        ElementsArray.push({
            id: key,
            config: myForm[key]
        });
    }
  
    let form = (
        &lt;form&gt;
            {ElementsArray.map(el =&gt; (
                &lt;Input 
                key={el.id}
                elementType={el.config.elementType}
                elementConfig={el.config.elementConfig}
                value={el.config.value}              
                changed={e =&gt; inputChangedHandler(e, el.id)}
                firstOption={el.config.firstOption}
            /&gt;
                ))}
            
        &lt;/form&gt;
        
            );
  
    return(
          &lt;div&gt;
              {form}
          &lt;/div&gt;
    );
  }
  
  export default MyForm;
  </code></pre>
  <p>The options charge on the select2, however when I select an option on the second select, the options dissappear and the value of the select2 is not updated.</p>
  <p>Thanks.</p>