I have this select from shadcn and I am trying to use it with zod. Upon clicking on the select, it would show these errors:

TypeError: undefined is not iterable (cannot read property
Symbol(Symbol.iterator))

I have these bookFormats.tsx:

export const bookFormat = [
    {label: "Hardcover", value: "Hardcover"},
    {label: "Paperback", value: "Paperback"},
    {label: "Board Book", value: "Board Book"},
    {label: "Leather-bound", value: "Leather-bound"},
    {label: "Large Print", value: "Large Print"}
] as const;

formSchema.tsx

export const formSchema = z.object({
    format: z.enum(['Hardcover', 'Paperback', 'Board Book', 'Spiral-bound', 'Leather-bound', 'Large Print']),
})

The component::

     const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            format: 'Hardcover',
        }
    })
    
Then the `select`:

     <FormField
                            control={form.control}
                            name="format"
                            render={({ field }) => (
                                <FormItem className="flex flex-col">
                                <FormLabel>Book Format</FormLabel>
                                <Popover>
                                    <PopoverTrigger asChild>
                                    <FormControl>
                                        <Button
                                        variant="outline"
                                        role="combobox"
                                        className={cn(
                                            "w-[200px] justify-between",
                                            !field.value && "text-muted-foreground"
                                        )}
                                        >
                                        {field.value
                                            ? bookFormat.find(
                                                (book) => book.value === field.value
                                            )?.label
                                            : "Select Book Format"}
                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                        </Button>
                                    </FormControl>
                                    </PopoverTrigger>
                                    <PopoverContent className="w-[200px] p-0">
                                    <Command>
                                        <CommandInput placeholder="Search language..." />
                                        <CommandEmpty>No book format found </CommandEmpty>
                                        <CommandGroup>
                                        {bookFormat.map((book) => (
                                            <CommandItem
                                            value={book.label}
                                            key={book.value}
                                            onSelect={() => {
                                                form.setValue("format", book.value)
                                            }}
                                            >
                                            <Check
                                                className={cn(
                                                "mr-2 h-4 w-4",
                                                book.value === field.value
                                                    ? "opacity-100"
                                                    : "opacity-0"
                                                )}
                                            />
                                            {book.label}
                                            </CommandItem>
                                        ))}
                                        </CommandGroup>
                                    </Command>
                                    </PopoverContent>
                                </Popover>
                                <FormMessage />
                                </FormItem>
                            )}
                            />