Передача данных между инпутами
Есть два компонента, в каждом по 3 инпута - время, дата, место. Необходимо сделать, что бы по нажатию на кнопку, данные из инпутов менялись между компонентами. Принцип как в гугл картах, когда строишь маршрут из точки А в точку Б и есть возможность поменять их местами.

Код компонента:
const DestinationInfo = () => {
return (
<div className={styles.wrapper}>
<div className={styles.item}>
<div className={styles.itemTitle}>Locations</div>
<div className='d-flex flex-row aic jcsb mt-8'>
<select className={styles.city} name='city' id='city' defaultValue='default'>
<option value='default'>Select Your City</option>
<option value='moscow'>Moscow</option>
<option value='novosibirsk'>Novosibirsk</option>
</select>
<img
className={styles.arrowDown}
width={14}
height={14}
src='./images/arrow-down.svg'
alt='Arrow Down'
/>
</div>
<div className={styles.divider}></div>
</div>
<div className={styles.item}>
<div className={styles.itemTitle}>Date</div>
<div className='d-flex flex-row aic jcsb mt-8 pos-r'>
<input
className={styles.date}
type='date'
name='calendar'
min='2023-03-01'
max='2024-01-01'
placeholder='Date'
/>
</div>
<div className={styles.divider}></div>
</div>
<div className={styles.item}>
<div className={styles.itemTitle}>Time</div>
<div className='d-flex flex-row aic jcsb mt-8'>
<input className={styles.time} type='time' id='time' name='time' />
</div>
</div>
</div>
);
Реакт только изучаю, поэтому о многих вещах могу не догадаться.