focus of field controls with formik

I have a form using formik, comprising a date field and a text field.

when I add a date in the form the text field is automatically put in error.

enter image description here

I think it comes from the initavalues

initialValues={{
  comment: '',
  endDate: '',
}}

it checks the value of the comment field which is empty and declares it in error.

if I remove comment from initialvalues I end up with an error :

Property 'comment' does not exist on type '{ endDate: string; }'.

How to make so that the field comment is not in error when I empty it or I validate the form?

const FormTest = (props: {
  mvts: Movement[];
  tiersRef: string;
  masterRef: string;
  submitCallback: any;
 }) => {
 const schema = yup.object().shape({
comment: yup.string().required(),
endDate: yup.string().required(),
 });
 return (
<>
  <Formik
    initialValues={{
      comment: '',
      endDate: '',
    }}
    onSubmit={(values) => {}}
    validationSchema={schema}
  >
    {(formikProps) => (
      <form
        onSubmit={formikProps.handleSubmit}
        aria-label="form-add-promise"
      >
        <section>
          <p>
            <I18nWrapper
              translateKey={'event.form-create-promise.explanations'}
            />
          </p>
        </section>
        <section>
          <Row>
            <Form.Group controlId="datePromise" as={Row}>
              <Form.Label column lg={6}>
                <I18nWrapper
                  translateKey={'event.form-create-promise.date-promise'}
                />
              </Form.Label>
              <Col lg={6}>
                <Form.Control
                  value={formikProps.values.comment}
                  type="date"
                  name="endDate"
                  aria-label="from date"
                  role="date"
                  onChange={formikProps.handleChange}
                  isInvalid={!!formikProps.errors.endDate}
                />
                <Form.Control.Feedback
                  type="invalid"
                  role="alert"
                  aria-label="no date promise"
                >
                  <FontAwesomeIcon
                    icon={faTimes}
                    className="me-2"
                    size="lg"
                  />
                  <I18nWrapper
                    translateKey={'event.form-create-promise.error.date'}
                  />
                </Form.Control.Feedback>
              </Col>
            </Form.Group>
          </Row>
        </section>
        <section>
          <Form.Group controlId="eventComment">
            <Form.Label>
              <I18nWrapper
                translateKey={'event.form-create-promise.error.comment'}
              />
            </Form.Label>
            <Form.Control
              value={formikProps.values.comment}
              onChange={formikProps.handleChange}
              as="textarea"
              aria-label="from textarea"
              rows={3}
              name="comment"
              role="textbox"
              isInvalid={!!formikProps.errors.comment}
            />
            <Form.Control.Feedback
              type="invalid"
              role="alert"
              aria-label="no comment"
            >
              <FontAwesomeIcon icon={faTimes} className="me-2" size="lg" />
              <I18nWrapper
                translateKey={'reminder.modal.phone-reminder.error'}
              />
            </Form.Control.Feedback>
          </Form.Group>
        </section>

        <div className="text-center">
          <GenericButton
            label={'event.form-create-promise.btn-creation'}
            type="submit"
            disabled={!formikProps.isValid}
          />
        </div>
      </form>
    )}
    </Formik>
   </>
 );
};



export default FormTest;
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum