How to make the animation of the modal be executed before the modal disappears on the screen? react

I have a modal that makes animation when entering and exiting the screen, but when exiting it simply disappears before making the animation, I can't identify the error. Can anyone help? my code:

displayModal ? (<Background><Backdrop onClick={closeModal} /><Container closeModal={closeModal} displayModal={displayModal}>        {children}</Container></Background>  ) : null;//animationsconst animationIn = keyframes`  from {    transform: translateY(100vh);  }  to {    transform: translateY(0);  }`;const animationOut = keyframes`  from {    transform: translateY(0);  }  to {    transform: translateY(100vh);  }`;const Container = styled.div<ContainerProps>`  visibility: visible;  display: flex;  width: 100%;  flex-direction: column;  align-items: center;  background: #ffffff;  animation: ${({ displayModal }) =>    displayModal      ? css`          ${animationIn} 0.5s ease-out forwards;        `      : css`          ${animationOut} 0.5s ease-out forwards;        `};  z-index: 600;  bottom: 0;`;

basically, in the animation of input it works normal, but when I click to close the modal, it disappears quickly, instead of making the animation out