Как сделать Переход Реактивной Позы, основанный на изменении состояния

Question

Я экспериментировал с React Pose всего несколько дней, и хотя мне это очень нравится, я борюсь с переходами.

...
    let value = (step.current_step * 100);
    let gutter = value === 0 ? 0 : value === 100 ? 16 : 32;

    const Stepper = posed.div({
        0: {
            x: `calc(-${value}vw - ${gutter}px)`,
            transition: {
                duration: 5000
            }
        },
        1: {
            x: `calc(-${value}vw - ${gutter}px)`,
            transition: {
                duration: 5000
            }
        },
        2: {
            x: `calc(-${value}vw - ${gutter}px)`,
            transition: {
                duration: 5000
            }
        }
    })

    return(
        <SliderContainer>
            <Stepper pose={step.current_step}
                className="stepper">
                <CardOne/>
                <CardTwo/>
                <CardThree/>
            </Stepper>
        </SliderContainer>
    )
}

Рассмотрим фрагмент кода выше. У меня есть <SliderContainer/>, который заполняет экран переполнением скрытого, <Stepper/> с дисплеем flex, который содержит элементы в строке. Я хочу переместить <Stepper/> через свойство x с позой. Я рассчитываю новые позиции (и некоторые промежутки), основываясь на текущем состоянии. У меня есть кнопки «Далее» и «Назад» на <Card/> компонентах, которые изменяют step.current_step. Все это работает, но не оживляет. Там нет продолжительности 5 секунд. Там нет перехода. Он просто перепрыгивает на следующую позицию без реальной анимации. Насколько я понимаю из документации, длительность - единственная опора, которую нужно применять. Я не уверен, что мне не хватает.