Добавить анимацию/переход к элементу при удалении из DOM

Вы не сможете анимировать его, не задерживая размонтирование компонента - в противном случае компонента технически больше нет, и поэтому вы не сможете добавить какую-либо анимацию/переход на его выходе.

Лично я считаю, что группа react-transition очень хорошо справляется с анимацией.

https://github.com/reactjs/реакт-переход-группа

Затем вы можете использовать что-то вроде:

<TransitionGroup>
    {this.state.showError && 
    <CSSTransition className='animate-error' timeout = {{enter: 500, exit: 500}}>
        <ErrorMesage ... />
    </CSSTransition>
    }
</TransitionGroup>

и управлять состояниями следующим образом:

.animate-error-enter .ErrorMessages.ErrorMessages--Centered { 
    the styles for the initial state of your animation/transition before it enters
}

.animate-error-enter-done .ErrorMessages.ErrorMessages--Centered { 
    the styles you animate to on enter 
}

.animate-error-exit .ErrorMessages.ErrorMessage--Centered { 
    the styles you animate to on exit in order to hide the component 
}

Время ожидания входа и выхода должно быть равно длительности вашей анимации/перехода для входа и выхода.

Вы можете setTimeout и поднять флаг анимации, когда props.show изменится. Что-то вроде этого:

const ErrorMessage = props => {
  const [show, setShow] = useState(props.show);
  const [hide, setHide] = useState(!props.show);
  const timeoutRef = useRef(null);

  useEffect(() => {
    if (props.show) {
      setShow(true);
      setHide(false);
      clearTimeout(timeoutRef.current);
    }
    else {
      setShow(false);
      timeoutRef.current = setTimeout(() => setHide(true), props.delay || 1000);
    }
  }, [props.show]);

  /* unmount cleanup */
  useEffect(() => () => clearTimeout(timeoutRef.current), []);

  let err = !hide ? (
    <div className = {'ErrorMessages ErrorMessages--Centered' + (show ? '' : ' ErrorMessages--fadeOut')}>
      <h4>{props.errorHeader}</h4>
      <p>{props.errorMessage}</p>
    </div>
  ) : null;
  return err;
};