title: Final form array fields async validation
body: <p>I am trying to implement async validation <code>react-final-form-array</code>. But its returning promise but not showing error at all.</p>
  
  <p>I took reference of <a href="https://codesandbox.io/s/wy7z7q5zx5" rel="nofollow noreferrer">this</a> code for asnyc validate and created my own version with final form array <a href="https://codesandbox.io/s/zxjwz0o51p" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Form:</p>
  
  <pre><code>&lt;Form
    onSubmit={onSubmit}
    mutators={{
      ...arrayMutators
    }}
    initialValues={{ customers: [{ placeholder: null }] }}
    validate={formValidate}
    render={({
      handleSubmit,
      mutators: { push, pop }, // injected from final-form-arrays above
      pristine,
      reset,
      submitting,
      values,
      errors
    }) =&gt; {
      return (
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;div&gt;
            &lt;label&gt;Company&lt;/label&gt;
            &lt;Field name="company" component="input" /&gt;
          &lt;/div&gt;
          &lt;div className="buttons"&gt;
            &lt;button type="button" onClick={() =&gt; push("customers", {})}&gt;
              Add Customer
            &lt;/button&gt;
            &lt;button type="button" onClick={() =&gt; pop("customers")}&gt;
              Remove Customer
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;FieldArray name="customers" validate={nameValidate}&gt;
            {({ fields }) =&gt;
              fields.map((name, index) =&gt; (
                &lt;div key={name}&gt;
                  &lt;label&gt;Cust. #{index + 1}&lt;/label&gt;
                  &lt;Field
                    name={`${name}.firstName`}
                    component={testInput}
                    placeholder="First Name"
                  /&gt;
                  &lt;Field
                    name={`${name}.lastName`}
                    component={testInput}
                    placeholder="Last Name"
                  /&gt;
                  &lt;span
                    onClick={() =&gt; fields.remove(index)}
                    style={{ cursor: "pointer" }}
                  &gt;
                    ❌
                  &lt;/span&gt;
                &lt;/div&gt;
              ))
            }
          &lt;/FieldArray&gt;
  
          &lt;div className="buttons"&gt;
            &lt;button type="submit" disabled={submitting || pristine}&gt;
              Submit
            &lt;/button&gt;
            &lt;button
              type="button"
              onClick={reset}
              disabled={submitting || pristine}
            &gt;
              Reset
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;pre&gt;
            nameValidate Function:{"\n"}
            {JSON.stringify(nameValidate(values.customers), 0, 2)}
          &lt;/pre&gt;
          &lt;pre&gt;
            Form errors:{"\n"}
            {JSON.stringify(errors, 0, 2)}
          &lt;/pre&gt;
          &lt;pre&gt;
            Form values:{"\n"}
            {JSON.stringify(values, 0, 2)}
          &lt;/pre&gt;
        &lt;/form&gt;
      );
    }}
  /&gt;
  </code></pre>
  
  <p>Validate Function:</p>
  
  <pre><code>const duplicateName = async value =&gt; {
    await sleep(400);
    if (
      ~["john", "paul", "george", "ringo"].indexOf(value &amp;&amp; value.toLowerCase())
    ) {
      return { firstName: "name taken!" };
    }
  };
  
  const nameValidate = values =&gt; {
    if (!values.length) return;
  
    const errorsArray = [];
  
    values.forEach(value =&gt; {
      if (value) {
        let errors = {};
  
        if (!value.firstName) errors.firstName = "First Name Required";
        if (Object.keys(errors).length === 0) {
          errors = duplicateName(value.firstName);
          console.log("errors", errors);
        }
        errorsArray.push(errors);
      }
    });
  
    return errorsArray;
  };
  </code></pre>