Hi, I am faily new to ZOD package, however I cant find any solution for my problem:

I am using react-hook-form to resolve the value. Basically the intended use-case is that I want to pre-select the select and set its value to the one matching the VALUES element (if there is one) and if not its simply setting it to "". In this case "HELLO" is not in the VALUES, the ImageColumn is an empty string. However when "image" is in VALUES (which is the case) then image gets selected but once I am submitting it the value of this field is still an empty string "". Its somehow not setting the value correctly and I have no clue why. And then I get this error: Invalid enum value. Expected 'productName' | 'productPrice' | 'productLink' | 'gtin' | 'productImageMain' | 'productInstock', received ''

Someone might help?

    const VALUES: [string, ...string[]] = [fileData.columns[0], ...fileData.columns.slice(1)];

    const SelectFileDataSchema = z.object({
        ImageColumn: z.enum(VALUES, {
            required_error: "Please select an ImageColumn."
        }).optional()
    });

    type FielDataValues = z.infer<typeof SelectFileDataSchema>

    const defaultValues: Partial<FielDataValues> = {
        ImageColumn: VALUES.find((value) => value.toLowerCase().includes("HELLO")) || "",
    };

    const form = useForm<FielDataValues>({
        resolver: zodResolver(SelectFileDataSchema),
        defaultValues,
    })

                        <FormField
                            control={form.control}
                            name="ImageColumn"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>ImageColumn (optional)</FormLabel>
                                    <div className="relative w-max">
                                        <FormControl>
                                            <select
                                                className={cn(
                                                    buttonVariants({ variant: "outline" }),
                                                    "w-[180px] appearance-none bg-transparent font-normal"
                                                )}
                                                {...field}
                                                value={field.value || ""}
                                            >
                                                <option disabled value="">Select</option>
                                                {VALUES.map((value) => (
                                                    <option key={value} value={value}>{value}</option>
                                                )
                                                )}
                                            </select>
                                        </FormControl>
                                        <FormMessage />
                                        <ChevronDownIcon className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
                                    </div>
                                </FormItem>
                            )}
                        />