React CSS animations that happen one after another using hooks

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] });
    }
  };