React-Spring: Got NaN while animating

Question

I am attempting to develop a basic blackjack game and aim to animate the cards using react-spring, transitioning them from the deck onto the playing area. My strategy involves obtaining the coordinates of the deck element and utilizing them as the starting position for the card animations.

Even though I've tried to explicitly set numerical values for the x and y coordinates within the setItems function, I'm still encountering the "NaN while animating" error. It's confusing because I've ensured that the values are indeed numbers before passing them to React Spring. Despite this seemingly correct configuration, the error persists, suggesting there might be an underlying issue with how React Spring processes or interprets these coordinates. I'm exploring further to understand the root cause and find a solution to resolve this error. If you've encountered a similar issue or have insights on how to fix it, I'd greatly appreciate your assistance.

// Dependency
import { useState } from 'react';
import { useTransition, animated } from 'react-spring';

// Style
import './App.css';

function App() {
  const [items, setItems] = useState([]);
  const transition = useTransition(items, {
    from: (item) => (next) => (
      next({
        x: item.x,
        y: item.y,
        opacity: 1,
      })
    ),
    enter: {
      y: 0,
      opacity: 1,
   },
      leave: {
      y: 800,
      opacity: 1,
    },
    trail: 200,
  })

  function toggleStyle() {
    const elements = document.querySelectorAll('.item');

    const allHaveClass = Array.from(elements).every(element =>             
    element.classList.contains('styled'));

    if (allHaveClass) {
      elements.forEach(e => {
        e.classList.remove('styled')
      })
    } else {
      elements.forEach(e => {
        e.classList.add('styled')
      })
    }

  }

  function animateCards() {
    const deck = document.querySelector('.deck');
    const container = document.querySelector('.container');

    // Calculate the position relative to the container
    const rectDeck = deck.getBoundingClientRect();
    const rectContainer = container.getBoundingClientRect();

    const x = rectDeck.left - rectContainer.left;
    const y = rectDeck.top - rectContainer.top;

    console.log('x:', x);
    console.log('y:', y);

    // Set the items with the calculated coordinates
    setItems(v => v.length ? [] : [
      { x: x, y: y },
      { x: x, y: y },
      { x: x, y: y },
    ]);
  }

  return (
    <div className="App">
      <div className="item deck" />
      <button onClick={() => {animateCards()}}>{items.length ? 'Remove' : 'Trigger'}</button>
      <button onClick={() => {toggleStyle()}}>Change</button>
      <div className="container">
        { transition((style, item) => (
            item ? <animated.div style={style} className="item" /> : ''
          )
        )}
      </div>
    </div>
  );
}

export default App;