I am using the PnP React IconPicker in a form. For the form validation, I am using Zod and UseForm (react hook form). How can I validate the icon picker so the user MUST choose an icon with the icon picker? The icon picker has no "name" attribute so I don't know how to include it in the Zod form validation.
<IconPicker buttonLabel={"Choose an icon..."}
onSave={(selectedIconName: string) => {
setIconName(selectedIconName);
}}
/>
Except the icon picker, I have two other fields: First name and Last name. These two fields have a name property. Here is my existing Zod validations
const zodSchema = z.object({
firstName: z.string().min(1, { message: "The first name is required" }).default(""),
lastName: z.string().min(1, { message: "The last name is required" }).default("")
})
Thanks a lot in advance.