How can I display formatted_address from geocode inside my formik form?

Question

I want to display the console.log(formatted_address) from geocode inside my formik form once the user click the use my current location button. Here is code below:

const [address, setAddress] = useState({
address: {
  formatted_address: "",
  latitude: "",
  longitude: ""
    }
  })

const successPosition = (position) => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    setAddress({ address: { ...address.address, latitude, longitude } })
// set Google Maps Geocoding API for purposes of quota management. Its optional but recommended.
Geocode.setApiKey(API_Key);

// set response language. Defaults to english.
Geocode.setLanguage("en");

// set response region. Its optional.
// A Geocoding request with region=es (Spain) will return the Spanish city.
Geocode.setRegion("ng");

// Enable or disable logs. Its optional.
Geocode.enableDebug();

// Get address from latitude & longitude.
Geocode.fromLatLng(latitude, longitude).then(
  (response) => {
    const formatted_address = response.results[0].formatted_address;
    setAddress({
      address: { ...address.address, formatted_address }
    });
    console.log(formatted_address)
  },
  (error) => {
    console.error(error);
  }
);


}

  const getCurrentLocation = () => {
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition(
        (pos) => successPosition(pos),
      );
    } else {
      alert("Your Browser doesn't support location service !");
    }
  };

And display that formatted_address inside the formik form below in order to fill it once the users decide to use the use my current location button to fill the form. when I insert {address.formatted_address} it's saying it's not defined. I set it as the value inside the address input.

<Formik
    initialValues={{
      address: '',
      city: '',
      state: '',
      country: '',
    }}
    onSubmit={(values, actions) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2))
        actions.setSubmitting(false)
      }, 1000)
    }}
  >
    {({ values, handleSubmit, handleChange, handleBlur }) => (
      <Form
        onSubmit={handleSubmit}
        autoComplete='off'
        className='text-left lg:w-full lg:py-10 lg:px-0 md:py-5 sm:py-10'
      >

        <div className=''>
          <label htmlFor='address' className='font-semibold'>
            Address
          </label>
          <input
            type='address'
            name='address'
            placeholder='Enter your address'
            onChange={handleChange}
            onBlur={handleBlur}
            value={address.formatted_address}
            className='border-2 border-[#F6F6F6]
            rounded w-full indent-2 lg:h-[56px] outline-none
            shadow-none focus:border-[#0559FD] md:py-3 md:my-2
            sm:py-3 sm:my-2'
          />
        </div>

        <div
          className='py-5 lg:grid lg:grid-cols-3 lg:gap-5 md:grid md:grid-cols-2
         md:gap-5 sm:grid sm:grid-cols-2 gap-5'
        >
          <div className='grid grid-cols-1 gap-2'>
            <label htmlFor='city' className='font-semibold'>
              City
            </label>
            <input
              type='text'
              name='cities'
              placeholder='Cities'
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.cities}
              className='border-2 border-[#F6F6F6] outline-none
            lg:w-[150px] lg:py-3 rounded text-left
            focus:border-[#0559FD] md:w-[150px] md:p-2 sm:w-[150px]
            sm:py-3'
            />
          </div>

          <div className='grid grid-cols-1 gap-2'>
            <label htmlFor='state' className='font-semibold'>
              State
            </label>
            <Field
              as='select'
              name='state'
              onBlur={handleBlur}
              value={selectedState}
              onChange={(e) => setSelectedState(e.target.value)}
              className='border-2 border-[#F6F6F6] outline-none
            cursor-pointer lg:w-[150px] lg:py-3 rounded text-left
            focus:border-[#0559FD] md:w-[150px] md:p-2 sm:w-[150px]
            sm:py-3'
            >
              <option>--Choose State--</option>
              {availableState?.states.map((e, key) => {
                return (
                  <option value={e.name} key={key}>
                    {e.name}
                  </option>
                )
              })}
            </Field>
          </div>

          <div className='grid grid-cols-1 gap-2'>
            <label htmlFor='country' className='font-semibold'>
              Country
            </label>
            <Field
              as='select'
              name='country'
              value={selectedCountry}
              onChange={(e) => setSelectedCountry(e.target.value)}
              className='border-2 border-[#F6F6F6] outline-none
            cursor-pointer lg:w-[150px] lg:py-3 rounded text-left
            focus:border-[#0559FD] md:w-[150px] md:p-2 sm:w-[150px]
            sm:py-3'
            >
              <option value='country'> -- Country -- </option>
              {data.countries.map((value, key) => {
                return (
                  <option value={value.name} key={key}>
                    {value.name}
                  </option>
                )
              })}
            </Field>
          </div>
        </div>
      </Form>
    )}
  </Formik>{' '}
  <div className='flex gap-1 items-center lg:mb-0'>
    <button onClick={() => getCurrentLocation()}> Use my current location </button>
  </div>