Any idea why transition doesn't work in this scenario?

[angelescuhoria]

Hello! I have the following problem: I have a circle mask following my cursor. It does follow my cursor but it seems to not recognize the transition as it's still the default one (spring) and I have no idea why. My first thought is going to my CSS but I'm not completely sure.
Here's my relevant files:

• App.tsx

import { motion } from "framer-motion";
import React from "react";
import "./global.css";
import "./index.css";
import useMousePosition from "./utils/useMousePosition";

function App() {
  const { x, y } = useMousePosition();
  const size = 300;
  return (
    <>
      <div className="hero">
        <div className="overlay"></div>
        <motion.div
          className="mask"
          animate={{
            WebkitMaskPosition: `${x - size / 2}px ${y - size / 2}px`,
            WebkitMaskSize: `${size}px`,
          }}
          transition={{ type: "tween", ease: "backOut" }}
        ></motion.div>
      </div>
    </>
  );
}

export default App;

• useMousePosition.ts

import { useEffect, useState } from "react";

export default function useMousePosition() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

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

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

  return mousePosition;
}

• index.css

.hero {
  width: 100vw;
  height: 100vh;
}

.overlay {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  background: linear-gradient(
      180deg,
      rgba(12, 12, 12, 1) 0%,
      rgba(12, 12, 12, 0) 10%
    ),
    linear-gradient(0deg, rgba(12, 12, 12, 1) 0%, rgba(12, 12, 12, 0) 20%),
    radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(12, 12, 12, 1) 90%);
}

.mask {
  position: absolute;
  z-index: 2;
  mask-image: url("../public/mask.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 300px;
  width: inherit;
  height: inherit;
  background-size: 60px 60px;
  background-clip: padding-box;
  background-image: linear-gradient(
      to right,
      rgba(245, 248, 248, 0.8) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(245, 248, 248, 0.8) 1px, transparent 1px);
}