How to make google Autofill correct address inputs - html

Question

When I click autofill, It only fills the first input. Is there a way to make it autofill, the other inputs. I am using reactjs.
<div className={`${styles.formGroup} ${styles.address}`}>
<label className={styles.label} htmlFor="address">
Address
</label>
<input
value={address}
onChange={(e) => setAddress((prev) => e.target.value)}
className={styles.input}
type="text"
id="address"
name="address"
required
/>
</div>
<div className={`${styles.formGroup} ${styles.address}`}>
<label className={styles.label} htmlFor="address">
Apartment
</label>
<input
value={apartment}
onChange={(e) => setApartment((prev) => e.target.value)}
className={styles.input}
type="text"
id="address"
name="address"
required
/>
</div>
<div className={`${styles.formGroup} `}>
<label className={styles.label} htmlFor="governorate">
Governorate
</label>
<Select
options={governorates}
value={governorate}
onChange={(e) => setGovernorate((prev) => e)}
styles={{
control: (baseStyles, state) => ({
...baseStyles,
borderRadius: "4px",
padding: "4.6px",
}),
}}
/>
</div>
How do I make it so that it automatically fills the other inputs