Estoy usando Framer Motion

El cuadro debe pasar de opacity: 0 to 1 y aumentar de altura en cada cambio de estado. Sin embargo, la altura es diferente según la condición.

No tengo idea de por qué la "altura" se anima cada vez, correctamente, pero la "opacidad" solo se anima en el primer renderizado.

Probé [0, 1, 0] y [1, 0, 1] también, pero ninguno de ellos tiene el efecto deseado.
Incluso probé [0, 1, 0.5] para probar mejor, pero se mantiene en 0.5 .

Código

https://codesandbox.io/s/angry-raman-bc9sf?file=/src/App.js

 import { motion } from "framer-motion"; import { useState } from "react"; export default function App({ href = "#", label, icon, notifCount }) { const [conditionIsMet, setConditionIsMet] = useState(false); const notifVariants = { conditionA: { opacity: [0, 1], height: ["40px", "90px"] }, conditionB: { opacity: [0, 1], height: ["40px", "200px"] } }; return ( <> {`Condition is ${conditionIsMet ? "A" : "B"}`} <button onClick={() => setConditionIsMet(!conditionIsMet)} /> <motion.span animate={conditionIsMet ? "conditionA" : "conditionB"} variants={notifVariants} /> </> ); }