React CSS animations that happen one after another using hooks - reactjs

Question

I am trying to make something where I have 8 images, with 4 shown at a time. I need them to have an animation when they enter and an animation when they exit. The first 4 exit when one of them is clicked. But I only see the enter animation. I assume because the enter and exit animation happen at the same time.
Is there a way to add a delay or something similar using hooks to make one happen before the other that is compatible with internet explorer (super important)? Code shown below:
const [question, setQuestion] = React.useState(props.Questions[0]);
const [animate, setAnimate] = React.useState("enter");
React.useEffect(() => {
if (Array.isArray(props.Questions) && props.Questions.length) {
// switch to the next iteration by passing the next data to the <Question component
setAnimate("enter");
setQuestion(props.Questions[0]);
} else {
// if there are no more iterations (this looks dumb but needs to be here and works)
$("#mrForm").submit();
}
});
const onStubClick = (e, QuestionCode, StubName) => {
e.preventDefault();
// store selected stub to be submitted later
var newResponse = response.concat({ QuestionCode, StubName });
setResponse(newResponse);
setAnimate("exit");
// remove the first iteration of stubs that were already shown
props.Questions.splice(0, 1);
if (props.QuestionText.QuestionTextLabel.length > 1) {
// remove first iteration of questiontext if applicable
props.QuestionText.QuestionTextLabel.splice(0, 1);
props.QuestionText.QuestionTextImage.splice(0, 1);
// switch the question text
setQuestionLabel({ Label: props.QuestionText.QuestionTextLabel[0], Image: props.QuestionText.QuestionTextImage[0] });
}
};