Hey i need some help... first let me share my code
here is my Title.tsx

import { FC } from "react";
import { motion } from "framer-motion";
import { NovaSquare } from "@/app/fonts";

interface TitleProps {
  title: string;
  subTitle?: string;
}

export const Title: FC<TitleProps> = ({ title, subTitle }) => {
  return (
    <h2
      // whileHover={{ scale: 1.05 }}
      // transition={{ type: "spring", stiffness: 400, damping: 10 }}
      className={`${NovaSquare.className} mb-10 font-nasalization text-slate-200 text-center text-5xl`}
    >
      {title}
      {subTitle && <span className="text-purple-300"> Me</span>}
    </h2>
  );
};

so the issue (shown in the iamge) i'm facing is when i add motion to thoese html tag and un-comment the animation part like this

import { FC } from "react";
import { motion } from "framer-motion";
import { NovaSquare } from "@/app/fonts";

interface TitleProps {
  title: string;
  subTitle?: string;
}

export const Title: FC<TitleProps> = ({ title, subTitle }) => {
  return (
    <motion.h2
      whileHover={{ scale: 1.05 }}
      transition={{ type: "spring", stiffness: 400, damping: 10 }}
      className={`${NovaSquare.className} mb-10 font-nasalization text-slate-200 text-center text-5xl`}
    >
      {title}
      {subTitle && <span className="text-purple-300"> Me</span>}
    </motion.h2>
  );
};

can someone help me how to resolve it whaen i google the error i got something like it cased by redux but i am not using redux...