react hook form multiple control on one Controller

I have a text input component that uses text input from react native paper, I want to make a place autocomplete by calling google place autocomplete API

right now I can display the suggestion but I can't change the text input value with the value of the suggestion that has been clicked screenshot of component

since I use Controller from react hook form I thought I could use setValue from useForm to change the value but it didn't do anything when I try to call setValue to change textInput value to one of the suggested value

import React from "react";
import { FlatList, StyleSheet, TouchableOpacity, View } from "react-native";
import { Text, TextInput, Colors } from "react-native-paper";
import { Controller, useForm } from "react-hook-form";
import axiosInstance from "services/axiosInstance";

export default React.forwardRef(
  (
    {
      name,
      label,
      placeholder,
      control,
      style: addOnStyle,
      ...props
    },
    ref
  ) => {
    const { setValue } = useForm();

    const [addressList, setAddressList] = React.useState([])
    const getAddressList = async (input) => {
        if (input == null || input.match(/^ *$/) !== null) {
            setAddressList([])
        } else {
            const response = await axiosInstance.get(
                `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${input}&components=country:us&language=en&key=API_KEY`
                )
            setAddressList([])
            if (response?.data?.status === "OK") {
                response?.data?.predictions?.map((item) => setAddressList(addressList => [...addressList, item.description]))
            } else {
                setAddressList(["Address not found."])
            }
        }
    }

    return (
      <View style={{ ...styles.viewInput, ...addOnStyle }}>
<Controller
  control={control}
  name={name}
  defaultValue=""
  render={({
   field: { onChange, onBlur, value, name },
   fieldState: { error },
  }) => {
   return (
    <>
     <TextInput
      label={label}
      name={name}
      placeholder={placeholder}
      onBlur={onBlur}
      onChangeText={(val) => onChange(val, getAddressList(val))}
      error={!!error?.message}
      value={value}
      ref={ref}
      {...props}
     />
     {error?.message ? (
      <Text style={styles.textError}>{error?.message}</Text>
     ) : null}
     {addressList.length > 0 ?
       <View style={styles.addressListContainer}>
         <FlatList
           keyExtractor={(_, i) => String(i)}
           data={addressList}
           renderItem={({ item, index }) => {
            return (
             <TouchableOpacity 
               activeOpacity={1} 
               style={[styles.addressListItem, index==0 ? {borderTopWidth: 0} : {borderTopWidth: 1}]}
               onPress={() => {setAddressList([]), setValue(name, item)}}
             >
              <Text numberOfLines={1}>{item}</Text>
             </TouchableOpacity>
            )
          }}
        />
       </View>
     : null}
   </>
  );
 }}
/>
</View>
    );
  }
);

UPDATE Changed the title to match the current question

I think for now my problem is since the control is set from the outside of the component that makes it can't be changed with setValue from inside the component, now I wonder if we could use multiple control on one Controller?