How to properly implement the following animation in React?

Question

JavaScript

Hello. This is a continuation of the question:
What is the correct next sort (React)?
Based on this functionality, I need to make the following animation.
The first element should go to opacity: 0. And the next one should animate into its place. (something seems to be true on prev, only now only the adjacent element takes its place)
I will provide my unsuccessful attempts, where prev more or less works. I understand that I have duplication and work with ref, but it is correct to work with state. But, nevertheless, I ask for your help, how to make this implementation correctly.
https://codepen.io/gsdev99/pen/pYqmRr
Second option:
https://codepen.io/gsdev99/pen/qvLerP
In fact, I want next to work the same as prev.