Formik validate initial values on page load

Question

Code below validate when submit and onFocusOut of textbox fine, What I expect it to trigger validation first reload of the page with initial values.

Tried validateOnMount, as well as others but not worked.

Whats missing here?

const RoleValidationSchema = Yup.object().shape({
    Adi: Yup.string()
        .min(2, "En az 2 karakter olmalıdır")
        .max(30, "En fazla 30 karakter olmalıdır")
        .required("Gerekli!")
})


const Role = (props) => {
    return (
        <div>
            <Formik
                onSubmit={(values, { validate }) => {
                    debugger
                    validate(values);
                    alert("Submietted!")
                    props.handleFormSubmit()
                }}
                initialValues={{
                    Adi: "d"
                }}
                validationSchema={RoleValidationSchema}
                validateOnMount={true}
                validateOnChange={true}
                validateOnBlur={true}
                render={({ errors, touched, setFieldValue, ...rest }) => {
                    debugger
                    return (
                        <Form>
                            <Row>
                                <Col sm="12">
                                    <Label for="Adi">Rol Adi</Label>
                                    <FormGroup className="position-relative">
                                        <Field
                                            autoComplete="off"
                                            id="Adi"
                                            className="form-control"
                                            name="Adi"
                                            type="text"
                                        />
                                        <ErrorMessage name="Adi">
                                            {(msg) => (
                                                <div className="field-error text-danger">{msg}</div>
                                            )}
                                        </ErrorMessage>
                                    </FormGroup>

                                </Col>
                                <Tree dataSource={treeData} targetKeys={targetKeys} expandKeys={[]} onChange={onChange} />
                            </Row>
                            <button type="submit" className="btn btn-success" > Kaydet</button>
                        </Form>
                    )
                }}
            />

        </div>
    )
}

Answer 1

Try to add enableReinitialize Prop to your Formik Component

<Formik
   enableReinitialize
   ......
/>

Answer 2

It's possible to provide a initial value for validation in the "initialIsValid" prop.

const validationSchema= Yup.object()
const initialValues = { ... }
const initialIsValid = schema.isValidSync(initialValues)

return <Formik 
          initialValues={initialValues}
          validationSchema={validationSchema}
          initialIsValid={initialIsValid }
          ...
       >
          ...
       </Formik>