我在一个金融服务应用程序中构建了一个余额概览，通过将props传递到一个<BalanceEntry>组件，然后将所有可用条目Map到页面来呈现内容。
使用Framer Motion，我希望将每个渲染的<BalanceEntry>的入口动画作为子对象错开0.2秒。

<div className="pt-16">
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, x: 1 }}
        transition={{
          delay: 0.3,
          default: { ease: 'easeInOut' },
          staggerChildren: 0.2,
        }}
      >
        {TransactionData.map((item) => {
          return (
            <div key={item.id}>
              <motion.div variants={BalanceEntryVariants}>
                <BalanceEntry
                  transactionDate={item.transactionDate}
                  transactionType={item.transactionType}
                  transactionID={item.transactionID}
                  transactionAmount={item.transactionAmount}
                  transactionIcon={item.transactionIcon}
                />
              </motion.div>
            </div>
          );
        })}
      </motion.div>
    </div>
          );

我已经根据SO上的多个建议创建了两个motion.div，以实现交错，但我仍然无法使每个BalanceEntry组件都具有交错动画，而是始终将它们作为一个组进行动画：

变量设置如下：

const BalanceEntryVariants = {
  hidden: {
    opacity: 0,
    y: -20,
  },
  visible: {
    opacity: 1,
    x: 1,
    transition: {
      ease: 'easeInOut',
    },
  },
};

我的错误是什么，使每个单独的BalanceEntry交错发生？