I’m encountering an issue with keyframes while using NextUI and Framer Motion. When I trigger a fast action, such as hovering over a tooltip for less than 200ms, the rendered page breaks, and I receive an error message

Error Message

chunk-3QTN4EH6.js?v=47cbdbc1:9145 Uncaught Error: Only two keyframes currently supported with spring and inertia animations. Trying to animate scale(0.6),scale(0.61547),scale(0.65082),scale(0.69443),scale(0.73944),scale(0.78204),scale(0.82036),scale(0.85368),scale(0.88195),scale(0.90551),scale(0.92487),scale(0.94061),scale(0.95328),scale(0.9634),scale(0.97144),scale(0.97779),scale(0.98278),scale(0.98668),scale(0.98973),scale(0.99209),scale(0.99393),scale(0.99534),scale(0.99644),scale(0.99728),scale(0.99792),scale(0.99842),scale(0.99879),scale(0.99908),scale(0.9993),scale(0.99947),scale(1)
    at invariant (chunk-OCSUDSUG.js?v=47cbdbc1:1714:13)
    at MainThreadAnimation.initPlayback (chunk-OCSUDSUG.js?v=47cbdbc1:3006:9)
    at MainThreadAnimation.onKeyframesResolved (chunk-OCSUDSUG.js?v=47cbdbc1:2353:36)
    at KeyframeResolver.onResolved [as onComplete] (chunk-OCSUDSUG.js?v=47cbdbc1:2991:67)
    at KeyframeResolver.complete (chunk-OCSUDSUG.js?v=47cbdbc1:1927:10)
    at KeyframeResolver.scheduleResolve (chunk-OCSUDSUG.js?v=47cbdbc1:1887:12)
    at new MainThreadAnimation (chunk-OCSUDSUG.js?v=47cbdbc1:2997:19)
    at AcceleratedAnimation.stop (chunk-OCSUDSUG.js?v=47cbdbc1:3445:31)
    at MotionValue.stop (chunk-OCSUDSUG.js?v=47cbdbc1:3843:22)
    at chunk-OCSUDSUG.js?v=47cbdbc1:6796:15

Example Image Show Tooltip Without Hover

Example Image Show Tooltip Wit Hover

<div className="max-w-md:hidden relative flex justify-center items-center gap-3 text-center w-full">
              <Tooltip color="secondary" content="Details">
                <span className="text-lg text-default-500 cursor-pointer active:opacity-50">
                  <AiFillEye />
                </span>
              </Tooltip>
              <Tooltip color="secondary" content="Edit user">
                <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
                  <BiEdit />
                </span>
              </Tooltip>
              <Tooltip color="danger" content="Delete user">
                <span className="text-lg text-danger cursor-pointer active:opacity-50">
                  <MdDelete />
                </span>
            </Tooltip>
</div>

Main.tsx

tailwind.config.js