Связь между двумя компонентами-близнецами в React

У меня есть эта настройка в моем App.js:

<div class=container>
 <PlayerElement className = "main" name = "Mark" state = "NY" />
 <PlayerElement className = "secondary" name = "Andrew" state = "CA" />
</div>

Элемент игрока с className вторичный является тем же компонентом, что и главный. Только то, что он скрыт и расположен выше и правее поверх главный. Это определяется их собственными классами CSS. Когда вы щелкнете по первому Элемент игрока, его собственная непрозрачность должна быть установлена ​​на 0,5, и должен появиться вторичный. При повторном нажатии он должен вернуться в предыдущее состояние.

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