title: React Bootstrap Select multiple showing error in Formik as it is expecting a string but returns array
body: <p>React Bootstrap Select multiple showing error in Formik as it is expecting a string but returns array</p>
  
  <p>Error: Warning: The <code>value</code> prop supplied to  must be an array if <code>multiple</code> is true.</p>
  
  <p>Check the render method of <code>FormControl</code>.</p>
  
  <p>I believe that the error is on FormControl.d.ts inside Formik because it only accepts a string as a type</p>
  
  <p>This is the Interface that Formik exposes</p>
  
  <pre><code>    export interface FormControlProps {
        innerRef?: React.LegacyRef&lt;this&gt;;
        size?: 'sm' | 'lg';
        plaintext?: boolean;
        readOnly?: boolean;
        disabled?: boolean;
        value?: string; // &lt;-- it should also receive string[] ?
        onChange?: React.FormEventHandler&lt;this&gt;;
        type?: string;
        id?: string;
        isValid?: boolean;
        isInvalid?: boolean;
      }
  </code></pre>
  
  <p>This is my file from where I'm trying to get the expertise</p>
  
  <pre><code>    import React from 'react';
      import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap';
      import { connect } from 'react-redux';
      import { Formik } from 'formik';
      import styled from 'styled-components';
      import * as Yup from 'yup';
  
      const ExpertSignUpSchema = Yup.object().shape({
          expertise: Yup.array()
              .of(Yup.string())
              .min(1)
              .required('Required'),
      });
  
      const ExpertSignUpPage: React.FC = () =&gt; (
          &lt;Container fluid&gt;
              &lt;Row&gt;
                  &lt;Col md={4} /&gt;
                  &lt;Col&gt;
                      &lt;CardWrapper&gt;
                          &lt;Card&gt;
                              &lt;Card.Header as="h5"&gt;Expert Registration&lt;/Card.Header&gt;
                              &lt;Card.Body&gt;
                                  &lt;Formik
                                      initialValues={{
                                          expertise: [''],
                                      }}
                                      validationSchema={ExpertSignUpSchema}
                                      onSubmit={(values, { setSubmitting }) =&gt; {
                                          console.log(values);
                                          setSubmitting(false);
                                      }}
                                      render={({
                                          values,
                                          errors,
                                          touched,
                                          handleBlur,
                                          handleChange,
                                          handleSubmit,
                                          isSubmitting,
                                      }) =&gt; (
                                          &lt;Form noValidate onSubmit={handleSubmit}&gt;
                                                  &lt;Form.Control
                                                      as="select"
                                                      multiple
                                                      name="expertise"
                                                      onChange={handleChange}
                                                      onBlur={handleBlur}
                                                      value={values.expertise} // &lt;--- it should allow an array of strings, currently the code won't compile or won't update the form value as it has multiple in the form control
                                                      isValid={touched.expertise &amp;&amp; !errors.expertise}
                                                      isInvalid={!!errors.expertise}
                                                  &gt;
                                                      &lt;option value="YOGA"&gt;Yoga&lt;/option&gt;
                                                      &lt;option value="PERSONAL_TRAINER"&gt;Personal Trainer&lt;/option&gt;
                                                      &lt;option value="LIFE_COACH"&gt;Life Coach&lt;/option&gt;
                                                      &lt;option value="NUTRITIONIST"&gt;Nutritionist&lt;/option&gt;
                                                  &lt;/Form.Control&gt;
                                              &lt;/Form.Group&gt;
                                              &lt;Button
                                                  variant="outline-primary"
                                                  type="submit"
                                                  block={true}
                                                  disabled={isSubmitting}
                                              &gt;
                                                  Register
                                              &lt;/Button&gt;
                                          &lt;/Form&gt;
                                      )}
                                  /&gt;
                              &lt;/Card.Body&gt;
                          &lt;/Card&gt;
                      &lt;/CardWrapper&gt;
                  &lt;/Col&gt;
                  &lt;Col md={4} /&gt;
              &lt;/Row&gt;
          &lt;/Container&gt;
      );
  
      export default connect(
          null,
          null,
      )(ExpertSignUpPage);
  
      const CardWrapper = styled.div`
          margin-top: 5rem;
      `;
  
  </code></pre>
  
  <p>For some reason I'm unable to even get the values in the array when I update the the definition file to string | string[]. </p>