the exit animation using useAnimate() and usePresence() doesn't seem to work

[titan-double07]

the exit animation using useAnimate() and usePresence() doesn't seem to work,

 <AnimatePresence>
           {currentStep===1 ? <Form1 key={1}  id={1} currentStep={currentStep} {...formControl}/>:null}
            <Form2 id={2} currentStep={currentStep} {...formControl} />
</AnimatePresence>

in Form1:

useEffect(() => {
    if (isPresent) {
      const enterAnimation =  () => {
        animate(scope.current, { x: [100,0] },{duration:0.5, delay:1});
      };
      enterAnimation();
    } else {
      const exitAnimation = () => {
         animate(scope.current, { x: [0, -100] }, { duration: 0.5 });
        safeToRemove();
      };

      exitAnimation();
    }
   }, [isPresent]);


  return (
 <div key={id} id={id} ref={scope} className=" lg:w-[420px] lg:h-[500px]">
        <header className="pb-5 lg:pb-8">
          <h1>Personal info</h1>
          <p>Please provide your name, email address, and phone number.</p>
        </header>
</div>

[IlirEdis]

Did you make this work? Im having the same issue.

[titan-double07]

No, had to revert to the motion element method 🥲

[IlirEdis]

Damn, i wanted to keep my code in one place :/