Yup conditional section based on property in schema

Question

Having a play with yup in vue with vee-validate, and struggling to get this working

What I'm trying to achieve is if the paymentType is 'BankCard', I want to payment details to be validated a cardNumber, cardHolder etc, otherwise, just get the email.

const { handleSubmit, errors, defineField } = useForm({
    validationSchema: toTypedSchema(yup.object({
        paymentType: yup.string().required().default('BankCard'),
        paymentDetails: yup.object().when('paymentType', {
            is: (val: string) => val == 'BankCard',
            then: yup.object({
                cardNumber: yup.string().required(),
                cardHolder: yup.string().required(),
                expiryDate: yup.string().required(),
                cvv: yup.string().required(),
            }),
            otherwise: yup.string().email().required()
        })
    })),
});

Getting the following error:

No overload matches this call.
  Overload 1 of 4, '(keys: string | string[], builder: ConditionBuilder<ObjectSchema<{}, AnyObject, {}, "">>): ObjectSchema<{}, AnyObject, {}, "">', gave the following error.ts(2769)

I tried reading all the similar questions on here, but everything seems to just use a boolean