Simple opacity plugin animation

[irv-armenta-g]

I am using auto-animate in React 19.

All I am looking for is for a simple "in and out" animation of an element with just an opacity change:

add: 0 opacity ----> 1 opacity
remove: 1 opacity ----> 0 opacity

However, it seems then auto-animate is trying to do something else, I don't mind crossfading the opacity but of course the desired outcome would be to add to wait until the remove ends, so it looks "smoother".

Here it is the sample code I have, that is not working exactly how would I expect:

const opacityAnimation: AutoAnimationPlugin = (currentElement, action) => {
  let keyframes: Keyframe[] = [];

  if (action === 'add') {
    keyframes = [{ opacity: 0 }, { opacity: 1 }];
  }

  if (action === 'remove') {
    keyframes = [{ opacity: 1 }, { opacity: 0 }];
  }

  if (action === 'remain') {
    keyframes = [{ opacity: 0 }, { opacity: 1 }];
  }

  return new KeyframeEffect(currentElement, keyframes, {
    duration: 500,
    easing: 'ease-in-out'
  });
};

// using in hook
const [parent] = useAutoAnimate(opacityAnimation);

I am setting up remain as well to even if it's basically the same , it would still cause it to do an opacity change, this is basically done for a text change in an inline <span />

Any ideas why it does not goes as smoothly as it should be? do I need to setup some offsets?