I have a form with a list of addresses. If the user selects an address, I want the address field in the form to be updated. I am using a Controller for each field in a Nextjs client page.
I can see the getValues shows the changed values
but this is not reflected on the page.

Dropdown to select an address:

<FloatLabel>
                                <Dropdown
                                    id="userAddress"
                                    onChange={handleUserAddressChange}
                                    placeholder="Please select saved address to use"
                                    // itemTemplate={addressOptionTemplate}
                                    value={selectedAddressId}
                                    options={userAddress}
                                    optionValue="id"
                                    optionLabel="addressName"
                                />
                                <label htmlFor="userAddress">Saved Addresses</label>
                            </FloatLabel>

onchangeevent:

const handleUserAddressChange = (e: DropdownChangeEvent) => {
    const id: string = e.value;
    setSelectedAddressId(id);

    setValue('firstName', 'new first name');
    console.log(`values ${JSON.stringify(getValues(), null, 2)}`);}

Controller element

<Controller
                                name="firstName"
                                control={control}
                                rules={{
                                    required: 'Name is required.',
                                }}
                                render={({ field, fieldState }) => (
                                    <>
                                        <label
                                            htmlFor={field.name}
                                            className={classNames({
                                                'p-error': errors.firstName,
                                            })}></label>
                                        <span className="p-float-label">
                                            <InputText
                                                id={field.name}
                                                autoFocus={true}
                                                width={'100%'}
                                                className={classNames({
                                                    'p-invalid': fieldState.error,
                                                })}
                                                onChange={(e) => field.onChange(e.target.value)}
                                            />
                                            <label htmlFor={field.name}>First Name</label>
                                        </span>
                                        {getFormErrorMessage(field.name)}
                                    </>
                                )}
                            />

How do I get the controller to show the updated value.