Cómo hacer que mi modal se deslice hacia abajo en React utilizando keyframes

Tengo un modal deslizante que funciona perfectamente en React utilizando keyframes. Quiero que se deslice hacia abajo al cerrar. El deslizamiento hacia arriba se activa mediante el estado y estoy tratando de activar el deslizamiento hacia abajo configurando la clase que sucede cuando el usuario hace clic para cerrar el botón.

No estoy seguro de cómo lograr esto con keyframes.

Aquí está mi código:

JSX

CSS modules y keyframes

.toDisplayModal {
margin: auto;
top: 10%;
position: fixed;
z-index: 999;
height: 100%;
animation: slideup 0.3s;
}

.toCloseModal {
animation: slidedown 0.3s;
}

@keyframes slideup {
0% {
transform: translateY(400px);
animation-timing-function: ease-out;
}
60% {
transform: translateY(20px);
animation-timing-function: ease-in;
}
80% {
transform: translateY(10px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0px);
animation-timing-function: ease-in;
}
}
@keyframes slidedown {
100% {
transform: translateY(0px);
animation-timing-function: ease-out;
}
80% {
transform: translateY(10px);
animation-timing-function: ease-in;
}
60% {
transform: translateY(20px);
animation-timing-function: ease-out;
}
0% {
transform: translateY(400px);
animation-timing-function: ease-in;
}
}