React validation issue for render value

Question

I'm using react Yup validation and I have a problem(Edit form) with the validation when editing something. Even though the fields are filled the validator behaves like they are empty. I've logged the state and the values appear also there..Same code working fine without value={contactPersonName || ""} parameter... Refer the attached image

import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import MaintanaceRequestService from "../../service/tenant/MaintanaceRequestService";
import axios from "axios";
import { CheckSquare } from "react-feather";
import {
  Card,
  CardHeader,
  CardTitle,
  CardBody,
  Button,
  FormGroup,
  Col,
} from "reactstrap";

const formValidation = Yup.object().shape({
  contactPersonName: Yup.string().nullable().required("Required"),
  priority: Yup.number().required("Required"),
  contactPersonEmail: Yup.string()
    .email("Invalid email address")
    .required("Required"),
});

class MaintananceUpdate extends React.Component {
  state = {
    successAlert: true,
  };

  async componentDidMount() {
    let mess = "";
    await axios
      .post("http://localhost:8080/tenant/maint/preEdit/", {
        maintId: "1144",
      })

      .then((response) => {
        console.log(response.data.maintReq);
        mess = response.data.maintReq;

        this.setState({
          updatable: true,
          contactPersonName: mess.contactPersonName,
          contactPersonEmail: mess.contactPersonEmail,
        });
      });
  }

  render() {
    const { contactPersonName, contactPersonEmail } = this.state;

    return (
      <Card>
        <CardHeader>
          <CardTitle>Maintanance Request</CardTitle>
        </CardHeader>
        <CardBody>
          <Formik
            initialValues={{
              contactPersonEmail: "",
              contactPersonName: "",
            }}
            validationSchema={formValidation}
            onSubmit={(values, actions) => {
              values.issueType = values.issueType.value;

              console.log(values.priority);
              setTimeout(() => {
                MaintanaceRequestService.createRequest(values).then(
                  (response) =>
                    this.setState({
                      description: response.data.description,
                    })
                );
                console.log(values);

                this.successMessgae("successAlert", true);
                actions.setSubmitting(false);
              }, 1000);
            }}
          >
            {(props) => {
              const { handleSubmit, setFieldValue, handleBlur } = props;
              return (
                <Form onSubmit={props.handleSubmit}>
                  <FormGroup>
                    <label htmlFor="contactPersonName">Person Name</label>
                    <Field
                      className="form-control"
                      name="contactPersonName"
                      placeholder="Doe"
                      type="text"
                      value={contactPersonName || ""}
                      onChange={(e) =>
                        this.setState({ contactPersonName: e.target.value })
                      }
                      onBlur={handleBlur}
                    />
                    <ErrorMessage
                      name="contactPersonName"
                      component="div"
                      className="field-error text-danger"
                    />
                  </FormGroup>
                  <FormGroup>
                    <label htmlFor="contactPersonEmail">Email</label>
                    <Field
                      className="form-control"
                      name="contactPersonEmail"
                      placeholder="[email protected]"
                      type="email"
                      value={contactPersonEmail || ""}
                      onChange={(e) =>
                        this.setState({ contactPersonEmail: e.target.value })
                      }
                      onBlur={handleBlur}
                    />

                    <ErrorMessage
                      name="contactPersonEmail"
                      component="div"
                      className="field-error text-danger"
                    />
                  </FormGroup>

                  <FormGroup row>
                    <Col md={{ size: 8, offset: 4 }}>
                      <Button.Ripple
                        color="primary"
                        type="submit"
                        className="mr-1 mb-1"
                      >
                        <CheckSquare size={14} />
                        <span className="align-middle ml-25">Submit</span>
                      </Button.Ripple>
                    </Col>
                  </FormGroup>
                </Form>
              );
            }}
          </Formik>
        </CardBody>
      </Card>
    );
  }
}
export default MaintananceUpdate;

Image

Answer 1

Adding enableReinitialize to formik solved my issue

<Formik
          enableReinitialize
          ..
          render={
            ({
              ..
            }) => ( 
             //form uses initialValues
          )} />