Анимация в react карусели

делаю свой компонент карусели на react.

return (
    <div className="slider">
      <Arrow direction="prev" handleClick={goPrevSlide} />

      <div className="slider-wrapper">
        <SliderContent
          translate={translate}
          transition={transition}
          slides={slides}
        />
      </div>

      <Arrow direction="next" handleClick={goNextSlide} />
    </div>
  );

В массиве slides хранятся 5 элементов. На экран пользователя всегда выводятся 3 средних элемента:

<div
  className="slider__content"
  style={styles}
>
  {slides.slice(1,4).map(({ name, id }) => (
    <Slide key={id} name={name} />
  ))}
</div>

При нажатии на стрелки слайдера массив определенным образом изменяется, например: Изначальный массив slades=['a', 'b', 'c', 'd', 'e'], на экране пользователя будут элементы 'b', 'c', 'd'. Если пользователь нажал на кнопку в виде стрелки вправо, то массив slides стал - ['b', 'c', 'd', 'e', 'f'], а на экране пользователя теперь 'c', 'd', 'e'. Подскажите пожалуйста, как я могу с помощью анимации сделать простенький переход от
'b', 'c', 'd' к 'c', 'd', 'e'?