Animate using CreateAnimation not working in reverse direction (ionic/React)

I'm using CreateAnimation Component to animate my components in reverse direction. from within gestures(createGestures  hook(custom), left and right method while swiping left and right).

const {ref, gesture }=useGesture ({
right :() =>{
if(animationref.current !==null){
animationref.current.setupAnimation({
duration:1000,
**direction:'normal',** //**Works fine**
fromTo:{
property:'transform',
fromValue: `translateX(-100%)`,
toValue:`translate(0)`
}
});
animationref.current.animation.play();

}
left :() =>{
if(animationref.current !==null){
animationref.current.setupAnimation({
duration:1000,
**direction:'reverse'** //**Reverse animation doesnt seem to work when applied through ref(works fine if directly applied in render**
fromTo:{
property:'transform',
fromValue: `translateX(-0)`,
toValue:`translate(100%)`
}
});
animationref.current.animation.play();

}

}

});



I've a component like : 
return(
<IonPage ref={ref}>
<IonContent>
<CreateAnimation 
ref ={animationref} >
<div className='myclass'>
<switch>
<Route path ={'/abc'}>
{ABC }
</Route>
<Route path ={'/def'}>
{DEF }
</Route>
<Route path ={'/ghi'}>
{GHI }
</Route>

</switch>

</div> 
</CreateAnimation>
</IonPage>
</IonContent>
);`Preformatted text`

ionic/react:5.4.0
React: 17.0.1