プルダウンして、項目を選択したのにも関わらず、requiredエラーが発生する件

はじめに

登録画面から情報を入力し、送信ボタンを押下すると、プルダウンの項目でrequiredエラーが発生しました。
項目を選択したにもかかわらず、なぜか発生していました。

問題

Register

export const Register: FC = memo(() => {
    return (
        <form onSubmit={onSubmit}>
            <Stack gap="4" align="flex-start" maxW="sm">
                <Field.Root invalid={!!errors.likeTechnology}>
                    <Field.Label>好きな技術</Field.Label>
                        <NativeSelect.Root {...register("likeTechnology", {required: "内容の入力は必須です"})}>
                        <NativeSelect.Field placeholder="Select option">
                            <option value="1">React</option>
                            <option value="2">TypeScript</option>
                            <option value="3">Github</option>
                        </NativeSelect.Field>
                        <NativeSelect.Indicator />
                        </NativeSelect.Root>
                    <Field.ErrorText>{errors.likeTechnology?.message}</Field.ErrorText>
                </Field.Root>
            </Stack>
        </form>
    )
});

NaviveSelectの使い方だとは思っていましたが、色々調べていました。

解決方法

結果、
NativeSelectはRootとFieldをもっており、今回registerはRootにもっていました。
それをField側で持たせるように変更しました。
Rootのままだと常に「未入力」扱いになるため、エラー発生が発生していました。

Register

export const Register: FC = memo(() => {
    return (
        <form onSubmit={onSubmit}>
            <Stack gap="4" align="flex-start" maxW="sm">
                <Field.Root invalid={!!errors.likeTechnology}>
                    <Field.Label>好きな技術</Field.Label>
                        <NativeSelect.Root>
                        <NativeSelect.Field {...register("likeTechnology", { required: "内容の入力は必須です" })}>
                            <option value="">Select option</option>
                            <option value="1">React</option>
                            <option value="2">TypeScript</option>
                            <option value="3">Github</option>
                        </NativeSelect.Field>
                        <NativeSelect.Indicator />
                        </NativeSelect.Root>
                    <Field.ErrorText>{errors.likeTechnology?.message}</Field.ErrorText>
                </Field.Root>
            </Stack>
        </form>
    )
});

おわりに

ほかのやり方あれば、ぜひ教えていただきたいです