Controlled <Select> not working as expected

[bradmk-1]

Afternoon all.

I have a simple form in nextjs, as seen below. Shadcn + react-hook-form is used, and i'm trying to set an object into state.

The issue is that on setting state in the select handler, it sets then seemingly renders again, setting selectedClient back to undefined.

I'm sure this isn't an issue with shadcn or radix, so does anybody have an idea of what i'm doing wrong?

<Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)}>
                    <div className='m-12'>
                        <FormField
                            control={form.control}
                            name="clientId"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Client</FormLabel>
                                    <Select
                                        onValueChange={(value) => {
                                            const client = clients.find((client: any) => client.client_id === value)
                                            console.log(client);
                                            setSelectedClient(client)
                                        }}
                                        value={selectedClient?.client_id}
                                    >
                                        <FormControl>
                                            <SelectTrigger>
                                                <SelectValue />
                                            </SelectTrigger>
                                        </FormControl>
                                        <SelectContent>
                                            <SelectGroup>
                                                <SelectLabel>Client</SelectLabel>
                                                {clients?.map((client: any) => (
                                                    <SelectItem key={client.client_id} value={client.client_id}>
                                                        {`${client.client_forename} ${client.client_surname}`}
                                                    </SelectItem>
                                                ))}
                                            </SelectGroup>
                                        </SelectContent>
                                    </Select>
                                </FormItem>
                            )}
                        />
                        ```
                        
                        
                        

[Nilomiranda]

Can you share more code related to this? Is there something else calling setSelectedClient? If you put selectedClient inside an effect and log the value, how many times do you see this log and with what values?

useEffect(() => {
  console.log({selectedClient})
}, [selectedClient])