title: How to add select field to FieldArray in formik
body: <p>I follow to this code:</p>
  
  <pre><code>import React from 'react';
  import { Formik, Form, Field, FieldArray } from 'formik';
  
  // Here is an example of a form with an editable list.
  // Next to each input are buttons for insert and remove.
  // If the list is empty, there is a button to add an item.
  export const FriendList = () =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Friend List&lt;/h1&gt;
      &lt;Formik
        initialValues={{ friends: ['jared', 'ian', 'brent'] }}
        onSubmit={values =&gt;
          setTimeout(() =&gt; {
            alert(JSON.stringify(values, null, 2));
          }, 500)
        }
        render={({ values }) =&gt; (
          &lt;Form&gt;
            &lt;FieldArray
              name="friends"
              render={arrayHelpers =&gt; (
                &lt;div&gt;
                  {values.friends &amp;&amp; values.friends.length &gt; 0 ? (
                    values.friends.map((friend, index) =&gt; (
                      &lt;div key={index}&gt;
                        &lt;Field name={`friends.${index}`} /&gt;
                        &lt;button
                          type="button"
                          onClick={() =&gt; arrayHelpers.remove(index)} // remove a friend from the list
                        &gt;
                          -
                        &lt;/button&gt;
                        &lt;button
                          type="button"
                          onClick={() =&gt; arrayHelpers.insert(index, '')} // insert an empty string at a position
                        &gt;
                          +
                        &lt;/button&gt;
                      &lt;/div&gt;
                    ))
                  ) : (
                    &lt;button type="button" onClick={() =&gt; arrayHelpers.push('')}&gt;
                      {/* show this when user has removed all friends from the list */}
                      Add a friend
                    &lt;/button&gt;
                  )}
                  &lt;div&gt;
                    &lt;button type="submit"&gt;Submit&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              )}
            /&gt;
          &lt;/Form&gt;
        )}
      /&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>But that for text input Field. 
  I want to replace to <code>select</code> and I do something like that.</p>
  
  <p>Replace:</p>
  
  <pre><code>&lt;Field name={`issues.${index}`} /&gt;
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>&lt;Field component="select" name="color"&gt;
    &lt;option value="red"&gt;Red&lt;/option&gt;
    &lt;option value="green"&gt;Green&lt;/option&gt;
    &lt;option value="blue"&gt;Blue&lt;/option&gt;
  &lt;/Field&gt;
  </code></pre>
  
  <p>I add 3 component when I choose the value in one component, It's effect to all of the component.</p>
  
  <p>What did I wrong here?</p>