How to fix the exit animation in Frame-motion?

I have a code as below :

export default ({ er, setError }) => {

    React.useEffect(() => {
        setTimeout(() => {
            setError('')
        }, 2000);
    }, [setError]);

    return (
        <AnimatePresence onExitComplete={()=>console.log('exit')}>
            { er && <motion.div  style={{ position: 'absolute', bottom: '10rem', right: '0' }} key="er" exit={{ x: 100 }} animate={{ x: -15 }} initial={{ x: 100 }} transition={{ duration: .8, ease: 'backInOut' }}>
                 ERROR : {er}
            </motion.div>}
        </AnimatePresence>
    );
}

and two things don't happen

1. The exit animation is not shown ( I believe the component is unmounted and doesn't have the time to show the animation and I am looking for a way to fix that )
2. The onExitComplete is not triggered.

How to address these 2 issues?