How to validate the value of a select element whose options are generated by Props passed into a React component

[risingfish]

I have a select element whose options are being generated using an array passed in from a higher level element. I can't use an enum because I don't know the options until the component is rendered, and using category: z.string() always gets NaN. I image there is a simple way to do this, but much googling isn't turning up answers. I do see a number of related questions to this, but the answers are always pointing the enum() documentation without any explanation so they're kind of useless.

[risingfish]

Here's the component (I'm learning React so please be gentle if something is particularly ugly).

import { FieldValues, useForm } from 'react-hook-form';
import * as z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { Dispatch, SetStateAction } from 'react';

const schema = z.object({
    description: z.string().min(3),
    amount: z
        .number({ invalid_type_error: 'Age field is required' })
        .min(3)
        .min(5, { message: 'Must be greater than 3' }),
    category: z.string(),
});

interface Props {
    expenses: object[];
    setExpenses: Dispatch<SetStateAction<string>>;
    categories: string[];
}

function ExpenseEntryForm({ expenses, setExpenses, categories = [] }: Props) {
    const {
        register,
        handleSubmit,
        formState: { errors, isValid },
    } = useForm<FormData>({ resolver: zodResolver(schema) });

    const handleOnSubmit = (data: FieldValues) => {
        console.log(data);
    };

    return (
        <form onSubmit={handleSubmit(handleOnSubmit)}>
            <div className="mb-3">
                <label htmlFor="description" className="form-label">
                    Description:
                </label>
                <input
                    {...register('description')}
                    type="text"
                    id="description"
                    name="description"
                    className="form-control"
                />
                {errors.description && (
                    <p className="text-danger">{errors.description.message}</p>
                )}
            </div>
            <div className="mb-3">
                <label htmlFor="amount" className="form-label">
                    Amount:
                </label>
                <input
                    {...register('amount', { valueAsNumber: true })}
                    type="number"
                    id="amount"
                    name="amount"
                    className="form-control"
                />
                {errors.amount && (
                    <p className="text-danger">{errors.amount.message}</p>
                )}
            </div>
            <div className="mb-3">
                <label htmlFor="category" className="form-label">
                    Category:
                </label>
                <select
                    {...register('category', { valueAsNumber: true })}
                    id="category"
                    name="category"
                    className="form-control"
                >
                    {categories.map((cat) => (
                        <option value={cat} key={cat} label={cat}>
                            {cat}
                        </option>
                    ))}
                </select>
                {errors.category && (
                    <p className="text-danger">{errors.category.message}</p>
                )}
            </div>

            <button className="btn btn-primary" type="submit">
                Submit
            </button>
        </form>
    );
}

export default ExpenseEntryForm;

[risingfish]

Ok, of course right after I post this, I see the issue. 🫤 Need to remove the valueAsNumber flags form the register functions.