Best practices for handling React Select value types in forms with validation libraries (Zod/Yup)

[adnanx-ecosmob]

Problem Summary

I'm working with React Select in a form that uses React Hook Form + Zod validation, and I'm struggling with the type inconsistency between edit and create modes:

• Create mode: React Select returns an object { label: "Company Name", value: "123" }
• Edit mode: I only have the ID string "123" from API
• Validation: Zod expects consistent types

Current Setup

// Zod schema - currently using z.any() as workaround
const schema = z.object({
  legalCompanyName: z.any(), // Want proper validation here
  
   // legalCompanyName: z.union([
   //z.string().nonempty({ message: requiredErrorMessage('Legal Company Name') }),
   //z.object({}).passthrough() // This allows any object structure
  ]),
});

// React Hook Form Controller
<Controller
  name="legalCompanyName"
  render={({ field }) => (
    <Select
      value={field.value} // Sometimes string, sometimes object
      onChange={field.onChange}
      options={brands}
    />
  )}
/>

and below approach looks super inconvinient

<ECSDropdown
  options={timezones}
  placeholder="Time zone"
  labelKey="location"
  valueKey="id"
  value={
    selectedTimezone || timezones?.find((opt) => opt.id === field.value) || null
  }
  onChange={(option) => {
    setSelectedTimezone(option);
    field.onChange(option ? option.id : null);
  }}
  error={errors?.timezone?.message}
/>