It seems that the official documentation for using useAnimate in conjunction with usePresence is somewhat misleading in this case.

The key is to remove the dependency array from the useEffect, so the animation can be triggered correctly without being tied to isPresent changes. Here is an example:

useEffect(() => {
    console.debug("[Effect] Animating experiences");

    if (isPresent) {
      const enterAnimation = async () => {
        await animate(scope.current, { y: [24, 0], opacity: [0, 1] }, { duration: 2 });
      };
      enterAnimation();
    } else {
      const exitAnimation = async () => {
        await animate(scope.current, { y: [0, -24], opacity: [1, 0] }, { duration: 2 });
        safeToRemove();
      };
      exitAnimation();
    }
});

By removing the dependency array, the useEffect is executed on each render, which correctly animates the element without issues.