ReactJs Tinder Like Card Stack Flick Animation с реактивной пружиной (с помощью жестов и кнопок)

Question

Я впервые работаю с библиотекой react-spring, и мне сложно понять, что к чему. Так что я хочу что-то вроде этого codepen (tinder, как щелчок карты) в ReactJs.

Это то, что у меня есть в песочнице со всеми несущественными функции удалены.

<>
  <center>
    <button onClick={() => alert('This should flick the card to left')}>Dislike</button>
    <button onClick={() => alert('This should bring back the card to stack from the it was sent earlier')}>Rewind</button>
    <button onClick={() => alert('This should flick the card to right')}>Like</button>
  </center>
  {props.map(({ x, y, rot, scale }, i) => (
    <animated.div key={i} style={{ transform: interpolate([x, y], (x, y) => `translate3d(${x}px,${y}px,0)`) }}>
      {/* This is the card itself, we're binding our gesture to it (and inject its index so we know which is which) */}
      <animated.div {...bind(i)} style={{ transform: interpolate([rot, scale], trans), backgroundImage: `url(${cards[i]})` }} />
    </animated.div>
  ))}
</>

Я хочу, чтобы карта щелкала по нажатию кнопки, а также отслеживала карты, поскольку кнопка перемотки назад вернет их в стопку справа или слева в зависимости от направления он был заменен (как трут).