Yup validator not validating an array of object when using Schema.when

[dextersiah]

I have the following schema here

const schema = object().shape({
    has_experience: string().required('Working experience is A Required Field').oneOf(['1', '0']),
    user_job_categories: array(object().when('has_experience', {
        is: (value: string) => {
            console.log(value);
            return value === '1'
        },
        then: (schema) => schema.test({
            name: 'industry',
            message: 'Industry is a required field',
            // Manually validate this due to complexity of array and object
            test: (value) => {

                const objectValue = value as IndustryJobData

                if (
                    objectValue.industry.value === '' ||
                    objectValue.industry.label === '' ||
                    objectValue.industry.job_category.length === 0 ||
                    objectValue.industry.job_category.some((jobCategory) => jobCategory.value === '' || jobCategory.label === '')

                ) {
                    return false
                }
                return true
            }
        })
    })),
})

And the useForm hook

const { handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
        has_experience: '1',
        user_job_categories: [{
            id: randomValue(0, 10000),
            industry: {
                label: '',
                value: null,
                job_category: [{
                    label: '',
                    value: null
                }]
            }
        }],
    }
});

return (
    <div>
        <form onSubmit={handleSubmit((data) => {
            console.log('submit');
            console.log(data);
        })}>

        <Controller
            name="has_experience"
            control={control}
            render={({ field }) => (
                <>
                    <div>
                        <label htmlFor="">1</label>
                        <input
                            type="radio"
                            name="experience"
                            value="1"
                            onChange={() => {
                                field.onChange('1')
                            }}
                            checked={field.value === '1'}
                        />
                    </div>
                    <div>
                        <label htmlFor="">0</label>
                        <input
                            type="radio"
                            name="experience"
                            value="1"
                            onChange={() => {
                                field.onChange('0')
                            }}
                            checked={field.value === '0'}
                        />
                    </div>
                </>
            )}
        />

            <p>Errors: { JSON.stringify(errors) }</p>

            <button type="submit">Submit</button>

        </form>

    </div>
);

When though the defaultValue of has_experience is '1', When I submit my form it returned undefined in the console however the handleSubmit callback function was fired.

Anyone is able to assist me on this?

Versions
"@hookform/resolvers": "^3.1.1",
"react-hook-form": "^7.45.4",
"yup": "^1.2.0"