Select from radixUI is not working with react-hook-form

Question

I'm tring to make react-hook-form get the values from a Select component from RadixUI, however, even using a Controller component like a post in Stack Overflow or passing for other component fowardref from React isn't working. Someone can help? The code is messy because I was testing it, sorry

'use client';
import React from 'react';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { FormField } from '../ui/forms';
import { TextArea } from '../ui/forms/TextArea';
import DropdownCause from './DropdownCause';
import DropdownShop from './DropdownShops';
import Button from '../ui/Button';
import { DataPicker } from '../ui/forms/DataPicker';
import { useForm, Controller } from 'react-hook-form';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@radix-ui/react-select';
import DropdownNewTicket from './DropdownNewTicket';
import { MdArrowDropDown } from 'react-icons/md'
const fakeData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]


export default function NewTicketForm() {

  const session = useCurrentUser();
  let name = session?.name ? session.name : ' ';

  const { handleSubmit, register, control } = useForm({
    mode: 'all',
    reValidateMode: 'onChange',
    //resolver: zodResolver()
  });

  const createTicket = (data: any) => {
    console.log(data);
  };

  return (
    <div className='border-2 border-primary p-3 rounded justify-center self-center w-2/3 h-5/6 scrollbar-thumb-slate-700 scrollbar-thin scrollbar-thumb-rounded flex flex-col items-center overflow-y-scroll'>
      <form className='flex flex-col gap-6' onSubmit={handleSubmit(createTicket)}>
        <FormField fieldName='Nome' className='w-80 rounded border border-primary indent-1 text-lg' value={name} {...register('username')} />
        <DataPicker fieldName='Data da venda' {...register('sale-date')} />
        <Controller
          control={control}
          name="product"
          rules={{ required: true }}
          render={({ field }) => (
            <Select onValueChange={field.onChange} {...field} defaultValue='312321'>
              <SelectTrigger className='w-80 h-fit rounded-t rounded-tl border border-primary text-lg flex' asChild>
                <div className='flex justify-center'>
                  <SelectValue placeholder="Select a verified email to display" />
                  <div className=''>
                    <MdArrowDropDown size={25} />
                  </div>
                </div>
              </SelectTrigger>
              <SelectContent className='w-80 bg-foreground border border-primary h-80 overflow-y-scroll scrollbar-thumb-primary scrollbar-thin scrollbar-thumb-rounded'>
                {fakeData.map((index) => {

                  const isFinal = index == fakeData.length

                  return (
                    <SelectItem key={index} value={`Item ${index}`} className={`border-b text-center border-gray-400 w-full ${isFinal ? 'border-none' : 'border-b'} p-1`}>Item {index}</SelectItem>
                  )
                })}
              </SelectContent>
            </Select>
          )} />
        <DropdownCause />
        <DropdownShop />
        <TextArea fieldName='Defeito' />
        <Button text='Enviar' type='submit' style={'w-full p-1'} />
      </form>
    </div>
  );
}

Answer 1

For RadixUI version: ^3.0.2

 <Controller
    control={control}
    name='product'
    rules={{ required: true }}
    render={({ field }) => (
      <Select.Root onValueChange={field.onChange} {...field}>
        <Select.Trigger className='w-80 h-fit rounded-t rounded-tl border border-primary text-lg flex'>
          <div className='flex justify-center'>
            <div className=''>
              <MdArrowDropDown size={25} />
            </div>
          </div>
        </Select.Trigger>
        <Select.Content className='w-80 bg-foreground border border-primary h-80 overflow-y-scroll scrollbar-thumb-primary scrollbar-thin scrollbar-thumb-rounded'>
          {fakeData.map((index) => {
            const isFinal = index == fakeData.length

            return (
              <Select.Item
                key={index}
                value={`Item ${index}`}
                className={`border-b text-center border-gray-400 w-full ${isFinal ? 'border-none' : 'border-b'} p-1`}
              >
                Item {index}
              </Select.Item>
            )
          })}
        </Select.Content>
      </Select.Root>
    )}
  />