yup validation 2 of 3 inputs required - reactjs

Question

I have yup validation in my form. I want to validate if user compleate minimum 2 of 3 inputs. When user not compleate i want change only a color of text to red. How can i setup my schema to do that. Here's my form:
<form>
{!loading ? (
<Paper title={t('common:cardTitles.extendDevice')} {...register('extendDevice')}>
<div className="flex md:flex-row flex-col justify-center items-center md:justify-between border-b-[1px] md:pb-6 pb-[17px]">
<h3 className="font-bold subheading">{t('common:deviceData')}</h3>
<div className="flex flex-row gap-1">
<ErrorIcon className="text-[#80858F] w-6" />
<p
className={mergeClasses(
'md:text-sm text-xs text-[#80858F]',
errors.extendDevice ? 'text-red-600' : 'text-[#80858F]',
)}
>
{t('common:errors.atLeastTwoFields')}
</p>
</div>
</div>
<div className="md:pt-6 pt-[17px] grid md:grid-cols-2 gap-4">
<TextInput
{...register('serialNumber')}
label={t('common:labels.serialNumber')}
name="serialNumber"
placeholder={t('common:placeholders.typeSerialNumber')}
/>
<TextInput
{...register('businessNumber')}
label={t('common:labels.businessNumber')}
name="business-number"
placeholder={t('common:placeholders.typeBusinessNumber')}
/>
</div>
<div className="pt-4">
<NumberInput
{...register('pinNumber')}
label={t('common:labels.pin')}
name="pin-number"
placeholder={t('common:placeholders.typePinNumber')}
/>
</div>
<div className="flex w-full justify-end pt-4">
<Button
className="py-3.5 px-6 bg-[#336BB3] text-white md:w-[115px] w-full"
label={t('common:labels.verify')}
onClick={handleSubmit(onSubmit)}
type="submit"
/>
</div>
</Paper>
) : (
<VerificationInProgress />
)}
</form>

Answer 1

You can write a test in YUP to check if specific fields have been entered.
const formValidation = Yup.object().shape({
name: Yup.string().test(
"oneOfRequired",
"One of the three fields need to be filled in",
function (item) {
return this.parent.name || this.parent.surname || this.parent.country;
}
),
surname: Yup.string().test(
"oneOfRequired",
"One of the three fields need to be filled in",
function (item) {
return this.parent.name || this.parent.surname || this.parent.country;
}
),
country: Yup.string().test(
"oneOfRequired",
"One of the three fields need to be filled in",
function (item) {
// Check if one of them have been filled in
return this.parent.name || this.parent.surname || this.parent.country;
}
)
});
Here is a codesandbox : https://codesandbox.io/s/goofy-bell-ji28jy?file=/src/App.js:279-302