GSAP cursor animation makes me lose focus on nav bar

I am experimenting the GSAP tutorial to understand how it works with React. I can't figure out why I cannot click on my navigation link anymore when the following code has been implemented in my home page :

My Circle Component

const Circle = forwardRef(({ size, delay }, ref) => {
  const el = useRef();
  useImperativeHandle(
    ref,
    () => {
      return {
        moveTo(x, y) {
          gsap.to(el.current, { x, y, delay });
        },
      };
    },
    [delay]
  );
  return <div className={`circle ${size}`} ref={el}></div>;
});

(extract of) My Homepage

import { gsap } from "gsap";
import { useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import Circle from "../../components/circle/Circle";

const Home = () => {
  //special cursor
  const circleRefs = useRef([]);
  useEffect(() => {
    circleRefs.current.forEach((ref) =>
      ref.moveTo(window.innerWidth / 2, window.innerHeight / 2)
    );
    const onMove = ({ clientX, clientY }) => {
      circleRefs.current.forEach((ref) => ref.moveTo(clientX, clientY));
    };
    window.addEventListener("pointermove", onMove);
    return () => window.removeEventListener("pointermove", onMove);
  }, []);

  const addCircleRef = (ref) => {
    if (ref) circleRefs.current.push(ref);
  };

  return (
    <div className="home">
      <div className="topbar">
        <nav>
          <ul>
            <Link to={`/characters`}>
              <li>Characters</li>
            </Link>
            <Link to={`/comics`}>
              <li>Comics</li>
            </Link>
            <Link to={`/favorites`}>
              <li>Favorites</li>
            </Link>
          </ul>
        </nav>
      </div>
      <Circle size="sm" ref={addCircleRef} delay={0} />
      <Circle size="md" ref={addCircleRef} delay={0.1} />
      <Circle size="lg" ref={addCircleRef} delay={0.2} />
    </div>
  );
};

export default Home;

Is it because ref is placed on the cursor ?