TypeScript error on custom Yup validation schema.

[scheng-niche]

Hi, I am building a stepper/wizard-like form in which the questions on each page changes upon "Next" button clicks. I am using the custom Yup resolver shown here: https://www.react-hook-form.com/advanced-usage/#CustomHookwithResolver

Each page of the form has an array of questions; each question has a type and an id. I'm building a validation schema that is keyed off of question ids since there could be multiple question types per page (e.g. inputs, radio button groups, custom special questions, etc.)

I use a lookup object to determine the validation schema depending on the question type.

const StepperForm = () => {
    const content = useSelector(state => selectContent(state))
    
    const lookup = {
        // For example, this is a radio button group with a write-in option.
        // A user can either select one of the regular radio buttons or an "Other" option but they have to input something in the associated text field.
        [QuestionTypes.SpecialQuestion]: guid => {
            return {
               [`${guid}-other`]: yup.string().nullable(),
               [guid]: yup.string().when(`${guid}-other`, value => {
                   is: val => val[0] === 'Other',
                   then: yup.string().notRequired(),
                   otherwise: yup.string().required()
               }),
               [`${guid}-text`]: yup.string().when(`${guid}-other`, value => {
                   is: val => val[0] === 'Other',
                   then: yup.string().required().min(5).max(20),
                   otherwise: yup.string().notRequired()
                }),
            }
        },
    }

    const schema = content.reduce((accumulator, question) => {
        // The validation schema is keyed off of a question id since there could be
        // multiple question types per page (e.g. inputs, radio button groups, special question components, etc.)
        return { ...accumulator, lookup[question.type](question.id) }
     }, {})

    const formMethods = useForm({
        resolver: useYupValidationResolver(yup.object(schema)),
    })
    const { handleSubmit, reset, trigger } = formMethods

    // Rest of the component here
}

I am getting an error on the is property of a validation schema and I cannot figure out what it is referring to or how to fix it:

No overload matches this call.
  Overload 1 of 4, '(keys: string | string[], builder: ConditionBuilder<ArraySchema<any[] | undefined, AnyObject, undefined, "">>): ArraySchema<any[] | undefined, AnyObject, undefined, "">', gave the following error.
    Argument of type '{ is: (val: any) => boolean; then: ArraySchema<Maybe<any[] | undefined>, AnyObject, undefined, "">; otherwise: ArraySchema<any[] | undefined, AnyObject, undefined, "">; }' is not assignable to parameter of type 'ConditionBuilder<ArraySchema<any[] | undefined, AnyObject, undefined, "">>'.
      Object literal may only specify known properties, and 'is' does not exist in type 'ConditionBuilder<ArraySchema<any[] | undefined, AnyObject, undefined, "">>'.ts(2769)

Upon playing with it, I have gotten the TS errors to go away by making the schema look like this but can't figure out why this works and the above does not:

{
    [`${guid}-other`]: yup.string().nullable(),
    [guid]: yup.string().when(`${guid}-other`, value => {
        return value[0] === 'Other' ? yup.string().notRequired() : yup.string().required()
    }),
    [`${guid}-text`]: yup.string().when(`${guid}-other`, value => {
        return value[0] === 'Other'
            ? yup.string().required().min(5).max(20)
             : yup.string().notRequired()
    }),
}

Any help would be greatly appreciated.