Can't validate SelectMenu or UInputMenu NuxtUI components using Yup

<UFormGroup label="Product Type" name="productTypeId">
                <UInputMenu v-model="listing.product.productTypeId!" :options="productTypeOptions" value-attribute="id"
                    option-attribute="label"
                    :change="productTypeChange(productTypeOptions.find((productType: ProductType) => productType.id === listing.product.productTypeId))" />
            </UFormGroup> 

<UFormGroup label="Auction Duration" name="duration">
                <USelect type="number" v-model="listing.duration" :options="durationOptions">
                    <template #leading>
                        <UIcon name="i-heroicons-clock" class="w-5 h-5" />
                    </template>
                </USelect>
            </UFormGroup>

const newAuctionSchema = object({
    title: string().required('Required'),
    description: string().required('Required'),
    duration: number().required('Required'),
    startingPrice: number().required('Required'),
    reservePrice: number().required('Required'),
    images: mixed().required('Required')
        .test({
            message: '6 images maximum',
            test: (file, context) => {
                const isValid = listing.value.images.length < 6;
                if (!isValid) context?.createError();
                return isValid;
            }
        }),
    Year: number()
        .min(1900, 'Year must be 1900 or later')
        .max(new Date().getFullYear(), 'Year cannot be in the future')
        .required('Required'),
    Model: string().required('Required'),
    Make: string().required('Required'),
    Color: string().required('Required'),
    buyNowPrice: number().notRequired(),
    productTypeId: number().required('Required'),
    productName: string().required('Required')
})