GSAP cursor animation makes me lose focus on nav bar - reactjs

Question

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 ?