setting the value on formik text field based on drop down select

Question

I have one form in formik in react. it has 2 field one dropdown list and one input field. dropdown is getting populated from API. my requirement is when user selects any value in dropdown corresponding to that value address field gets populated.

I am populating list based on API call.

useEffect(()=>{
    fetchStatus();
},[]);

const fetchStatus = async ()=>{
   const {data}= await httpClient.get( config.resourceServerUrl+"/sponsors");
       if(data.length>0){
       setResult(data);
       setActive(true);  
   } 
}

below code is select.

                                  <div>
                                    <Field
                                        as="select"
                                        id="sponsor" 
                                        name="sponsor"
                                        className="form-control"
                                        placeholder="Sponsor"
                                        onChange={ (e:any)=>{  
                                            setFieldValue("address","Dummy Address");  
                                        }

                                        } >
                                        <option value="">Please select the 
                                              sponsor</option>
                                      {
                                         active && result.map((res:any)=>
                                              <option >{res.name}</option>
                                          )
                                      }
                                       </Field> 
                                </div>

when I am putting below in my select field to set address its working but its static. I want my data to get populated from API based on the value selected in list.

                                   onChange={ (e:any)=>{  
                                        setFieldValue("address","Dummy Address");  
                                    }

instead of this "Dummy Address" how can I put API data?

below is my address field.

                                 <td>
                                        <Field
                                            id="address"
                                            name="address"
                                            type="text"
                                            className="form-control "
                                            placeholder="Address"
                                        />
                                    </div>
                                </td>
                                <td>
                                    <span className={styles.mandatory}>
                                        <ErrorMessage name="address" />
                                    </span>
                                </td>

Answer 1

Whenever a 'sponsor' value is selected, you want to set the value of the 'address' field (based on the 'sponsor' value).

You can probably get the value of the 'sponsor' field from the 'event' (here denoted as e) argument of the onChange function of the <select> element :

onChange={(e) => {  
  const sponsor = e.target.value;

  // rest of your code
}

Another way would be to use the useEffect hook to set the value of the 'address' and have 'sponsor' in the dependency array. For example:

useEffect(() => {
  // make API call to fetch 'address' from 'sponsor' value

  // set 'address' value 
}, [sponsor])