FadeInLeft & FadeOutLeft in React with Animate Style

Question

I have a react Sidebar component that appear when i toggle a state. I added a fadeInLeft animation class with Animate.style so i thought it would be nice to have a fadeOutLeft effect too whenever i set the state to false condition. All went smooth for the fadeInLeft class effect but when i toggle the state to be false the component just disappear without the fadeOutEffect class that i added, how is that happened?

video of it: https://www.loom.com/share/ff26dc014bbb43649419b1ecd6bae01e

Sidebar Component

const Sidebar = ({ isDisplayed }) => {

       if(isDisplayed === true) {
        return(
            <Box
            position="absolute"
            top={0}
            left={0}
            width="155px"
            height="100vh"
            bgColor="#1e1e1e"
            className={`${Styles.SidebarBox} ${isDisplayed ?'animate__animated animate__fadeInLeft' : 'animate__animated animate__fadeOutLeft'}`}
            >
                <Text color="#fff">Test</Text>
          </Box>        
        )
       } 
}

Main Component

const Navbar = () => {

    const [display, setDisplay] = useState(false)
    const newRef = useRef(null)

    const handleClickOutside = (e) => {
        if(newRef.current && !newRef.current.contains(e.target)){
            setDisplay(false)
        }
    }

    useEffect(() => {
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('click', handleClickOutside, true);
        }
    },[])

  return (
    <Flex 
    justifyContent="space-between" 
    alignItems="center"
    w="100%"
    h="110px"
    px="150px"
    py="15px"
    bgColor="#1e1e1e"
    boxShadow="md"
    ref={newRef}
    >
       <Sidebar isDisplayed={display}  />

How can i have that fadeOutLeft effect whenever i change my display state to false?