Animation imperative function is null in setTimeout callback

[panda0603]

I am trying to use fadeOutUp after fadeInDown, like below:

textRef.fadeInDown(300).then(() => {
        setTimeout(() => {
          textRef.fadeOutUp(300);
        }, 2000);
      });

so after the text fadeInDown, show the text for 2 seconds and fadeOutUp the text. However when I use above code, I get the error

TypeError: null is not an object(evaluating 'textRef.fadeOutUp')

FadeInDown works fine, it is fadeOutUp that is causing the error. FadeOutUp outside setTimeout callback works fine, so I guess it is setTimeout that is causing the problem.

Any idea why?

[panda0603]

Just to answer, this happened because I put

let textRef = useRef();

inside the functional component to ref the animated component.

Instead of using useRef, I just put normal textRef variable outside the component and it works fine.

I'm not sure though why such behavior happens.