javascript - React の whileHover で Animate が機能しない

Question

現在、ホバー時にスケールがトリガーされているにもかかわらず、アニメーションが機能しないというこの問題に直面しています。

私はドキュメントを調べましたが、まだ理解できません。私は何を逃したのですか？ヘルプ！

ここに私のコードとブラウザからの警告があります:

            import { motion } from "framer-motion";

            <motion.div className="heart-overlay"

                whileHover={{
                    animate: {x: 500},
                    scale: 1.2,
                    transition: { ease: "easeOut", duration: 2 },
                }}>

                <div className="heart-top">
                    <Img className="heart-default" src={heart_default_top} />
                </div>
                <div className="heart-bot">
                    <Img className="heart-default" src={heart_default_bot} />
                </div>
            </motion.div>