Следуйте за мышью с анимацией в Framer Motion React

У меня есть пользовательский компонент курсора в моем приложении для реагирования. А для плавного перехода внутри области просмотра я использую Framer Motion.
Div под мышью имеет некоторый пользовательский стиль и без проблем следует за курсором. Но я хочу, чтобы этот div постоянно анимировался, например, поворачивал + изменял радиус границы или даже менял цвет bg.
Из документов Framer Motion я просмотрел раздел keyframes, и после применения той же инструкции он анимируется, но перестает следовать за курсором.
Он просто остается в верхнем левом углу экрана и выполняет анимацию. Но я хочу, чтобы он анимировался, следуя за курсором.

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";

const CustomCursor = () => {
  const [mousePosition, setMousePosition] = useState({
    x: 0,
    y: 0,
  });

  useEffect(() => {
    const updateMousePosition = (e) => {
      setMousePosition({
        x: e.clientX,
        y: e.clientY,
      });
    };

    window.addEventListener("mousemove", updateMousePosition);

    return () => {
      window.removeEventListener("mousemove", updateMousePosition);
    };
  }, []);

  const style = {
    transform: "translate(-50%, -50%)",
    width: "400px",
    height: "400px",
    borderRadius: "50% 22% 40% 80%",
    filter: " blur(100px)",
    background: "rgb(255, 67, 75)",
    background: "linear-gradient(#43d9ad, #4d5bce)",
    opacity: 0.4,
    zIndex: 2,
  };

  const variants = {
    default: {
      x: mousePosition.x - 200,
      y: mousePosition.y - 200,
    },
  };

  const animate = {
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 270, 270, 0],
    borderRadius: ["20%", "20%", "50%", "50%", "20%"],
  };

  return (
    <motion.div
      className = {`fixed top-0 left-0 sm:hidden`}
      style = {style}
      variants = {variants}
      //tried setting animate = {animate} but didn't work
      animate = "default"
      transition = {{
        duration: 0.3,
        ease: "linear",
        repeat: 0,
        type: "spring",
        stiffness: 80,
      }}
    ></motion.div>
  );
};

export default CustomCursor;

Итак, как мне добиться здесь действия анимации + следования за курсором?

🤔 А знаете ли вы, что...
JavaScript поддерживает асинхронное программирование с использованием промисов и асинхронных функций.