Как правильно реализовать следующую анимацию на React?
 

Всем привет. Подскажите пожалуйста как правильно реализовать следующий функционал (анимацию):
Первый элемент должен уйти в opacity: 0. А последующий анимировано встать на его место. (на prev что-то похожее на правду, только сейчас на его место встает лишь соседний элемент)
Я предоставлю мои безуспешные попытки, где более или менее работает prev. Я понимаю, что у меня дублирование и работа с ref, а правильно работать с состояние. Но, тем не менее, прошу вашей помощи, как сделать данную реализацию правильно.
https://codepen.io/gsdev99/pen/pYqmRr