title: How do I pass in an updated value into a new separate component?
body: <p>I want the updated value to pass into a new components &quot;ExpandDevelopment&quot; after making a selection &quot;Development&quot; in the Department selection field.</p>
  <p>This is a list that populates the Department Field</p>
  <pre><code>export const getDepartmentCollection = ()=&gt;([
      { id: '1', title: 'Development' },
      { id: '2', title: 'Marketing' },
      { id: '3', title: 'Accounting' },
      { id: '4', title: 'HR' },
  ])
  </code></pre>
  <p>This is where the user can select from the Department dropdown menu.</p>
  <pre><code>&lt;Controls.Select
      name=&quot;departmentId&quot;
      label=&quot;Department&quot;
      value={values.departmentId}
      onChange={handleInputChange}
      options={employeeService.getDepartmentCollection()}
      error={errors.departmentId}
  /&gt;
  </code></pre>
  <p>Once the user makes a selection, I want to pass the new value into this new component here.</p>
  <pre><code>  const ExpandDevelopment = (fieldValue = values) =&gt; {
      if (fieldValue.departmentId === &quot;Development&quot;) {
          return (
            &lt;Controls.Input
              label=&quot;Developer Position&quot;
              name=&quot;developerPosition&quot;
              value={values.developerPosition}
            /&gt;
          );
        } else {
          return null;
      }
    };
  </code></pre>
  <p>However, the <code>fieldValue.departmentID</code> is rendering as undefined.</p>
  <p>If you want to have a deeper dive into how this code works (/page/Employees/EmployeeForm) - CodeSandBox: <a href="https://codesandbox.io/s/intelligent-river-9diyw" rel="nofollow noreferrer">https://codesandbox.io/s/intelligent-river-9diyw</a></p>