Formik can't pick selected value from select-CodePudding

I am using react, but I can't seem to add the selected select in the formik fromData, below is my form :

<Card.Body>
                
                    <Formik
                        validationSchema={signUpSchema}
                        onSubmit={handleSignUpAsync}
                        initialValues={{
                            firstName: '',
                            lastName: '',
                            emailAddress: '',
                            phoneNumber: '',
                            password: '',
                            countrySelector: '',
                            repeatedPassword: '',
                        }}
                    >
                        <Form>
                            <Row>
                                <Col xs={6}>
                                    <Input label="First Name" name="firstName" type="text" id="firstName" placeholder="Your first name..." />
                                </Col>
                                <Col xs={6}>
                                    <Input label="Last Name" name="lastName" type="text" id="lastName" placeholder="Your last name..." />
                                </Col>
                            </Row>
                            <Input label="E-Mail Address" name="emailAddress" type="email" id="emailAddress" placeholder="Your e-mail address..." />
                            <Input label="Phone Number (optional)" name="phoneNumber" type="tel" placeholder="Your phone number..." />
                            <select name="Select country" className="browser-default custom-select" name='countrySelector'>
                                <option>Select Country</option>
                                <option value="DW">DE</option>
                                <option value="US">US</option>
                            </select>

                            <Row>
                                <Col xs={6}>
                                    <Input label="Password" name="password" type="password" placeholder="Your password..." />
                                </Col>
                                <Col xs={6}>
                                    <Input label="Repeat Password" name="repeatedPassword" type="password" placeholder="Your password repeated..." />
                                </Col>
                            </Row>
                            <div className="text-center">
                                <Button variant="primary" type="submit">
                                    Sign-up now
                                </Button>
                                <p>
                                    ...or <Link to={APP_ROUTES.LOGIN}>log-in</Link>
                                </p>
                            </div>
                        </Form>
                    </Formik>
                </Card.Body>

Above is my form data, so I wanted to add a selectd value from select :

<select name="Select country" className="browser-default custom-select" name='countrySelector'>
                                <option>Select Country</option>
                                <option value="DW">DE</option>
                                <option value="US">US</option>
                            </select>

CodePudding user response：

You must use <Field as="select" name="countrySelector"/>. <Field/> will automagically hook up inputs to Formik. It uses the name attribute to match up with Formik state.

import { Field, Form, Formik } from 'formik';

<Field
  as="select"
  name="countrySelector"
  className="browser-default custom-select"
>
  <option>Select Country</option>
  <option value="DW">DE</option>
  <option value="US">US</option>
</Field>