Yup schema validation with arrays doesnt display the error message

All, I am using yup 0.26.2 for my react with typescript application. I am trying to do simple validation on my form( react Formal 0.28.5). Please see the schema I use below for validation. The problem is I don't see the required field error message when clicking on a submit button without entering anything on the form for payment details (array) doesn't show me the validation error text I have against each filed under payments array. The form doesn't get submitted though. Can someone help?

const mySchema = yup.object({
    customerId: yup.number(),
    customerType: yup.string(), 
    address: yup.object({
        address1: yup.string(),
        address1: yup.string(),
        city: yup.string()
            .required('City is required.')
            .typeError('City is required.'),
        state: yup.string()
        .required('state is required.')
        .typeError('state is required.')
    }),
    payments: yup.array().of(yup.object({
        paymentAmount: yup.number().typeError('Invalid Promise to Pay Amount.')
            .required("Payment Amount is required.")
            .min(1,"Payment Amount must be greater than 0."),
        paymentDate: yup.date().typeError('Invalid Date.')
            .required("Payment Date is required.")
            .min(tomorrow, 'Payment Date must be a future date.'),
        breakDays: yup.number()
            .typeError('Invalid Break Day')
            .required("Break Day is required.")
            .min(1, 'Break Days must be greater than 0.')
    }))
})