Custom Cursor built using Web Animations API doesn't use the correct "easing" and "duration"

Question

I am trying to build a custom cursor specifically using the Web Animations API in JavaScript. I've tried using both the mousemove event and requestAnimationFrame() to make this work. However, the cursor never follows the specified duration and easing.

While the two settings work with a single animation, however, when invoking multiple animate() promises, it shows the aforementioned problem.

I also read that the browser "automatically removes filling animation" as mentioned in the MDN Docs in case that was the problem.

Here's the code snippet.

const CURSOR = document.querySelector("#cursor");

window.addEventListener("mousemove", (e) => {
  const animation = CURSOR.animate([{
    transform: `translate3d(${e.clientX}px, ${e.clientY}px, 0) translate(-50%, -50%)`
  }], {
    duration: 4000,
    easing: "linear"
  });

  animation.onfinish = () => {
    animation.commitStyles();
  }
});

#cursor {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: black;
  will-change: transform;
}

<div id="cursor"></div>

I've also tested this with different css properties instead of transform. Like top left, margin-top margin-left.