How to use heroui classes inside motion tag?

[uigywnkiub]

This is not work.
I want apply danger/success depends on isIncome var.

                     <motion.li
                      key={t.id}
                      className='mb-3 flex w-full justify-between text-sm'
                      initial={{
                        opacity: 0,
                        y: -10,
                        color: t.isIncome
                          ? 'hsl(var(--heroui-success)/var(--heroui-success-opacity,var(--tw-text-opacity)))'
                          : 'hsl(var(--heroui-danger)/var(--heroui-danger-opacity,var(--tw-text-opacity)))',
                      }} // Green for income, red for expenses
                      animate={{
                        opacity: 1,
                        y: 0,
                        color:
                          'hsl(var(--heroui-foreground)/var(--heroui-foreground-opacity,var(--tw-text-opacity)))',
                      }} // Normal text color after animation
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 1, delay: index * 0.5 }}
                    >
                      <TransactionItem
                        hasCategoryChanged={hasCategoryChanged}
                        {...t}
                      />
                    </motion.li>