I am using Formik and Yup in my React Typescript project , I have a modal that will save a new value , I added Formik Validation to the Fields in my modal but when I click the add button in my page to load the modal it validates the fields and shows the error message

const validationSchema = () => {
    return Yup.object().shape({
      role_category: Yup.string().required("This field is required!"),
      description: Yup.string().required("This field is required!"),
    });
  };
  const initialValues = {
    role_category: "",
    description: "",
  };

```
return (
    <div style={{ position: "relative" }}>
      <ToastContainer limit={2} position="top-center" />
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
    onSubmit={handleSubmit}
    //validateOnsubmit={true}
    //validateOnMount={false}
    validateOnChange={false}
    validateOnBlur={false}
  >
    {({ setFieldValue, values }) => (
      <Form>
        <div className="title" style={{ position: "absolute" }}>
          <div className="card-title card-title-set-container">
            <div className="card-title-text">Role Category</div>{" "}
          </div>
          <ConfirmationModalContextProvider>
            <div className="card-grid card-grid-set-container">
              <div>
                <Row className="btn-position">
                  <Button
                    size="s"
                    class="primary"
                    name="Add"
                    type="submit"
                    disabled={false}
                    onClick={() => {
                      setId(undefined);
                      setFieldValue("role_category", "");
                      setFieldValue("description", "");

                      toggleModal();
                    }}
                  ></Button>
                </Row>
              </div>
              <div>
                <Row style={{ position: "relative" }}>
                  <DataTable
                    rows={roles}
                    columns={[
                      {
                        field: "id",
                        headerName: "RoleID",
                        width: 10,
                      },

                      {
                        field: "role_category",
                        headerName: "Role Category",
                        width: 150,
                      },
                      {
                        field: "description",
                        headerName: "Description",
                        headerClassName: "MuiDataGrid-columnHeaders",
                        width: 800,
                      },
                      {
                        field: "actions",
                        headerName: "Actions",
                        width: 150,
                        renderCell: (params) => {
                          return (
                            <div>
                              <img
                                src={editImage}
                                className="gridImageEdit"
                                onClick={(e) => {
                                  setFieldValue(
                                    "role_category",
                                    params.row.role_category
                                  );
                                  setFieldValue(
                                    "description",
                                    params.row.description
                                  );

                                  handleGridEditClick(e, params.row);
                                }}
                              ></img>

                              <DeleteIcon
                                className="gridImageDelete"
                                onClick={(e) =>
                                  handleGridDeleteClick(e, params.row)
                                }
                              ></DeleteIcon>
                            </div>
                          );
                        },
                      },
                    ]}
                    loading={!roles.length}
                  />
                </Row>
              </div>
            </div>
          </ConfirmationModalContextProvider>
        </div>

        <div></div>

        <Modal
          width="500px"
          height="350px"
          open={showModal}
          onClose={toggleModal}
        >
          <div className="form-group">
            <label htmlFor="role_category">Role Category</label>
            <Field
              name="role_category"
              type="text"
              className="form-control"
              onBlur={setRoleFieldState(values.role_category)}
            />
            <ErrorMessage
              name="role_category"
              component="div"
              className="alert yup-error"
            />
          </div>
          <div className="form-group">
            <label htmlFor="description">Description</label>
            <Field
              name="description"
              type="text"
              className="form-control"
              onBlur={setDescriptionFieldState(values.description)}
            />
            <ErrorMessage
              name="description"
              component="div"
              className="alert yup-error"
            />
          </div>

          <div style={{ display: "flex" }}>
            <div
              className="button-container"
              style={{ marginLeft: "auto" }}
            >
              <Button
                size="s"
                class="primary"
                name="Save"
                type="submit"
                disabled={
                  roleFieldState === "" || descriptionFieldState === ""
                }
                onClick={() => {
                  const roleValue = {
                    role: values.role_category,
                    des: values.description,
                  };

                  handleSave(roleValue);

                  toggleModal();
                }}
              ></Button>

              <Button
                size="s"
                class="secondary"
                name="Cancel"
                type="submit"
                disabled={false}
                onClick={toggleModal}
              ></Button>
            </div>
          </div>
        </Modal>
      </Form>
    )}
  </Formik>
</div>

);
“`

I tried using

     validateOnsubmit={flase}
        validateOnMount={false}
        validateOnChange={false}
        validateOnBlur={false}

but it didn’t work

I also changed the button type to “button” and then the validation didn’t work at all

I want the red error messages to disappear in modal loading