Анимация прокрутки массива в реакции

Question

Мне дан массив блогов. Я всегда хочу отобразить 4 из них и прокрутить влево / вправо с помощью onClick. Это уже работает.

Теперь я хочу анимировать "прокрутку" между различными состояниями.

export default function Contentbar({ data }) {
  const [count, setCount] = useState(0);


  return (
    <div className="wrapper text-center">
      <Row>
        {data.slice(count, count + 4).map((post) => (
          <Col sm="6" md="4" lg="3">
            <ContentCard post={post} />
          </Col>
        ))}
        <Button
          onClick={() => setCount(count > 0 ? count - 1 : count)}
        >
          Previous
        </Button>
        <Button
          onClick={() => setCount(count < data.length - 4 ? count + 1 : count)}
        >
          Next
        </Button>
      </Row>
    </div>
  );
}

Я уже пробовал использовать (не очень дружественный для разработчиков) React Transition Группа, но кажется, что я использую это неправильно.

Я бы хотел, по крайней мере, иметь возможность только исчезать и возвращаться, чтобы оживить, что что-то изменилось. Иметь анимацию вертикальной прокрутки было бы еще лучше.

Спасибо за помощь:)