title: Formik useField() hook and components
body: <p>I have a form with multiple pop-up menus. I'm using the <code>formik-material-ui</code> library for UI, and I've refactored the repetitive pop-ups into a component. When the component's code is in situ, in the form document, everything works as expected. However, if I refactor the component to a file, and import, something goes wrong, and Formik seems to 'lose touch' with the changing pop-up: the control draws as expected, and behaves as expected, but once selection is completed, the value is not saved to the pop-up, and the field appears empty. Here's the exported component:</p>
  
  <pre><code>import React, { useContext, useEffect, useState }  from 'react';
  import UserContext from '../UserContext';
  import { MenuItem, TextField } from '@material-ui/core';
  import { Field, useField } from 'formik';
  
  export default function UserSelect (props) {
    const [ field, meta ] = useField(props);
    const [ users, setUsers ] = useState([]);
    const { user } = useContext(UserContext);
    const { department, role , label } = props;
  
    useEffect( () =&gt; {
      async function getData(department, role) {
        let res;
  
        try{
          res = await fetch(`http://localhost:4005/users/${department}/${role}`
            , {
              headers: new Headers({
                'Authorization': 'Bearer ' + user.token
              })
            }
            );
        } catch(err) {
          alert(err);
        }
        const { rows } = await res.json();
        setUsers(rows.map((userRole, index) =&gt; (
          { index:index, value: userRole.username, label: `${userRole.surname}, ${userRole.forename}` }
        )).sort((a,b)=&gt;{return a.label &gt; b.label}));
      }
      getData(department, role);
    }, [user, department, role]);
  
    return (
      &lt;React.Fragment&gt;
        &lt;Field
          {...field}
          {...props}
          placeholder={label}
          fullWidth
          select
          label={label}
          type="text"
          value=""
          variant="outlined"
          margin="normal"
          component={TextField}
          &gt;
            {users.map(option =&gt; (
              &lt;MenuItem key={option.value} value={option.value}&gt;
                {option.label}
              &lt;/MenuItem&gt;
            ))}
        &lt;/Field&gt;
      &lt;/React.Fragment&gt;
    );
  };
  </code></pre>
  
  <p>I'm using it in the main file like this, looping over and array of <code>{title, department}</code> tuples:</p>
  
  <pre><code>{departments.map( ( department, index ) =&gt; (
    &lt;Grid container spacing={1}&gt;
      &lt;Grid item sm={6}&gt;
        &lt;UserSelect
          name={'assignedReviewer_'+index}
          label={department.title+'  Reviewer'}
          department={department.department} role="reviewer"/&gt;
      &lt;/Grid&gt;
    &lt;/Grid&gt;
  ))}
  </code></pre>
  
  <p>As mentioned, this works <em>perfectly</em> when the component is inside the same file, but fails when imported. Am I supposed to be doing something with the <code>meta</code> props inside the component?</p>