react-spring: использование useChain для масштабирования и перевода

В настоящее время я использую useTransition, чтобы моя мобильная навигация отображалась:

const MobileNav = ({show, toggle, styles}) => {
  let transition = useTransition(show, null, {
    from: {transform: 'translateY(-100%) scale(0.7)', ...styles},
    enter: {transform: 'translateY(0) scale(1)'},
    leave: {transform: 'translateY(100%) scale(0.7)'}
  })

  return (
    <>
      {transition.map(({item, props, key}) => {
        return item ? (
          <animated.div className="navbar__menu_mob" key={key} style={props}>
            ...someHtml
          </animated.div>
        ) : null
      })}
    </>
  )
}

С помощью этого кода масштаб и перевод анимируются одновременно. Моя конечная цель - связать их в цепочку, чтобы scale был первым, а translateY - после. Из примеров с помощью react-spring кажется, что лучший способ — это обернуть мой первый animated.div в другой animated.div и связать их с помощью useChain.

Кажется, я изо всех сил пытаюсь понять, как лучше всего связать мои анимации. В идеале мне не нужно было бы оборачивать то, что у меня сейчас есть, в другой animated.div. Я мог бы сделать с некоторым руководством.