Блог

Привет, ребята, я использую react-select в своем проекте вместе с Formik и Yup для проверки Проблема в том, что я вижу ошибку в объекте error в консоли после проверки его с помощью Yup, но я не могу показать эту ошибку на интерфейсе

Вот код ниже

 export default function FormSection({
  onContinueButton,
  allFormValues,
  holders,
}) {
  console.log(holders, "hol12");

  const formik = useFormik({
    initialValues: {
      firstBirthDate: "",
      firstSmoker: "",
      secondBirthDate: "",
      secondSmoker: "",
    },

    onSubmit: (values, { setSubmitting }) => {
      console.log(formik.errors);
      console.log(formik.values, "valqwqrwe");

      setSubmitting(false);
      allFormValues(formik.values);
      console.log(values);
    },
    validationSchema: validationSchemaSectionTwo,
  });
  const options = [
    { value: "Não", label: "Não" },
    { value: "Sim", label: "Sim" },
  ];

  const handleChangeFirstHolder = (selectedOption) => {
    formik.setFieldValue("firstSmoker", selectedOption);
  };


  return (
    <div className="secondSection">
      <form onSubmit={formik.handleSubmit}>
        <React.Fragment>
 <p className="tab-text">Data Nascimento</p>
            <DatePicker
              selected={formik.values.firstBirthDate}
              onChange={date => {
                formik.setFieldValue('firstBirthDate', date)
              }}
              className="birth-date-calendar"
              dateFormat="dd-MM-yyyy"
              name="firstBirthDate"
              placeholderText="DD-MM-AAAA"
              onBlur={formik.handleBlur}
            />
            {formik.errors.firstBirthDate amp;amp; formik.touched.firstBirthDate amp;amp; (
              <div className="formik-errors">{formik.errors.firstBirthDate}</div>
            )}


              <p className="tab-text">É fumador?</p>
              <Select
                value={formik.values.firstSmoker}
                name="firstSmoker"
                onChange={handleChangeFirstHolder}
                options={options}
                className="select-smoker"
                onBlur={formik.handleBlur}
              />
              {formik.errors.firstSmoker amp;amp; formik.touched.firstSmoker amp;amp; (
                <div className="formik-errors">{formik.errors.firstSmoker}</div>
              )}
            </React.Fragment>
    
            <br />
      </form>
    </div>
  );
}
 

Я тоже пытался

 onBlur={()=> {
       formik.setTouched({ firstSmoker: true });
   }}
 

но то, что делает этот метод, происходит, как только я нажимаю
на <Select/> тег, но затем он устанавливает formik.touched.firstBirthDate значение undefined