How do I set google address lat lng to input value?

Question

How do I set google address lat lng to input value?

I can got the address, lat and lng anything I want to got information.

But How do I set to my input value?

In my newPostPage.jsx, I use this code

const [selectedAddress,setSelectedAddress] = useState();
const [coordinates, setCoordinates] = useState();

<div className="item">
  <label htmlFor="address">Address</label>
  <GoogleAddressSearch
      selectedAddress={(value)=> setSelectedAddress(value)}
      setCoordinates={(value)=> setCoordinates(value)}
/>
</div>

GoogleAddressSearch.jsx code

<GooglePlacesAutocomplete apiKey=process.env.GoogleApiKey 
    selectProps={{
        placeholder: 'Search...',
        isClearable:true,
        className:'w-full',
        onChange:(place) => {
            console.log(place)
            selectedAddress(place)
            geocodeByAddress(place.label)
            .then(result=>getLatLng(result[0]))
            .then(({lat,lng}) => {
                setCoordinates({lat,lng})
            })
        }
    }}/>
    </div>

And I can get the information

Then, I want to put information to input value, how can I do? I need to put city, lat and lng, also it's disable.

I think the city json field is secondary_text

<div className="item">
  <label htmlFor="city">City</label>
  <input id="city" name="city" type="text" disabled />
</div>
<div className="item">
  <label htmlFor="latitude">Latitude</label>
  <input id="latitude" name="latitude" type="text" disabled />
</div>
<div className="item">
  <label htmlFor="longitude">Longitude</label>
  <input id="longitude" name="longitude" type="text" disabled />
</div>

Answer 1

Modified

const [selectedAddress,setSelectedAddress] = useState();
const [coordinates, setCoordinates] = useState();

to

const [selectedAddress,setSelectedAddress] = useState('');
const [coordinates, setCoordinates] = useState('');

And Add const [city, setCity] = useState('')

Then

<input id="city" name="city" type="text" disabled value={city} />
<input id="latitude" name="latitude" type="text" disabled value={coordinates.lat}  />
<input id="latitude" name="latitude" type="text" disabled value={coordinates.lng}  />

function GoogleAddressSearch add setCity

function GoogleAddressSearch({selectedAddress,setCoordinates,setCity})
.
.
.
setCity(place.value.structured_formatting.secondary_text)
..

Final

<div className="item">
  <label htmlFor="address">Address</label>
  <GoogleAddressSearch
      selectedAddress={(value)=> setSelectedAddress(value)}
      setCoordinates={(value)=> setCoordinates(value)}
      setCity={(value)=>setCity(value)}
/>
</div>