У меня есть несколько компонентов которые являются карточками пользователей и состоят из данных пользователя (аватарка, имя и т.д.). При клике на одну из карточек, нужно получить имя пользователя и перенести его в заголовок блока расположенного ниже

const Profiles = (props) => {
 return (
    <div className={css.profilesPage}>
      <h2 className={css.title} ref={refTitleProfile}>Profiles</h2>
      <div className={css.variableContent}>
        {props.dataState.usersIndex.map(user => 
        /*из данного компонента нужно получить имя */
        <ProfileComp 
          className={css.profile} 
          use={user} 
          key={user.id}
        />)}
      </div>
      <div className={css.blockMessage}>
        <div className={css.blockUserName}>
          <h3 className={css.userName}>{/*Сюда нужно установить имя*/}</h3>
        </div>
      </div>
    </div>
  )
  )
}

Пробовал играться с useState и пропсами, но что-то ни как до меня не дойдет как это реализовать.