How to flip a react component when i click on button?

Question

I want to flip a login component along with translation when i will click on a button.I used css transition and transform property and it is flipping but the problem is here that when it flips once again it is regaining its position .I want to flip once but it is flipping twice but the position i want to gain is correct.How can i flip over with translation when i will click on button.? This is login component and i added css also with it. Anyone can help me i will appreciate the support.Thanks 

i want to flip it once . Below is my code

eslint-disable jsx-a11y/anchor-is-valid */ import {useEffect,useState} from 'react' import {Outlet, Link} from 'react-router-dom' import {toAbsoluteUrl} from '../../../_metronic/helpers' import "./authLayout.css" import data from "./ar.json" import { useLang,setLanguage } from './../../../_metronic/i18n/Metronici18n';

type FlexDirection = 'ltr' | 'rtl';

const directionMap: { [key: string]: FlexDirection } = { left: 'ltr', right: 'rtl' };

const AuthLayout = () => { const lang = useLang() const [animate, setAnimate] = useState(false); const [animateLeft, setAnimateLeft] = useState(false); const [direction, setDirection] = useState("left") const [language, setLanguage] = useState('en'); const languageTranslations = { en: { username: 'username', password: 'password', signin : "Sign In", continue:"CONTINUE" }, ar: { username: 'اسم االمستخدم', password: 'كلمه السر', signin :"تسجيل الدخول", continue:"استمر" }, }; const text = languageTranslations[language];

useEffect(() => { const root = document.getElementById('root') if (root) { root.style.height = '100%' } return () => { if (root) { root.style.height = 'auto' } } [])

const handleArabicDirection = () => { setAnimate(animate === true) if(direction === "left") { setAnimateLeft(animateLeft === false) setLanguage(language === 'en' ? 'ar' : 'ar') setDirection(direction === "left" ? "right" : "right") } else if(direction === "right"){ setAnimateLeft(animateLeft === true) }

}

const handleEnglishDirection = () => { if(direction === "left"){ setAnimateLeft(animateLeft === true)

}

else if(direction === "right"){ setAnimateLeft(animateLeft === false) setDirection( "left" ) setLanguage(language === 'ar' ? 'en' : 'en') } setAnimate(animate === false) }

useEffect(() => { localStorage.setItem('text', JSON.stringify(text)); [text]);

return ( begin::Body */} begin::Form */} begin::Wrapper /} <div className={w-lg-500px p-10' box ${animate ? 'animateRight' : animateLeft ? 'animateLeft' : ""} } style={{ direction: directionMap[direction], }} > {/

{text.header}

/} {/

{text.content}

/} English {/ Arabic */} Arabic end::Wrapper */} end::Form */}

begin::Footer */} begin::Links /} {/ Terms

        <a href='#' className='px-5' target='_blank'>

Plans

        <a href='#' className='px-5' target='_blank'>

Contact Us */} end::Links */} end::Footer */} end::Body */}

begin::Aside */} <div className='d-flex flex-lg-row-fluid w-lg-50 bgi-size-cover bgi-position-center order-1 order-lg-2' style={{backgroundImage: url(${toAbsoluteUrl('/media/misc/auth-bg.png')})}} > begin::Content */} begin::Logo */} <img alt='Logo' src={toAbsoluteUrl('/media/logos/custom-1.png')} className='h-75px' /> end::Logo */}

begin::Image */} <img className='mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20' src={toAbsoluteUrl('/media/misc/auth-screens.png')} alt='' /> end::Image */}

begin::Title */} Fast, Efficient and Productive end::Title */}

begin::Text */} In this kind of post,{' '} the blogger introduces a person they’ve interviewed
and provides some background information about the interviewee and their
work following this is a transcript of the interview. end::Text */} end::Content */} end::Aside */} ) }

export {AuthLayout}

.box { transform: rotateY(0deg); transition: transform 7s; }

.animateRight { transform: rotateY(360deg) !important; }

.animateLeft { transform: rotateY(-360deg) !important; }

type here