React Transition Group Transition Enter Animation Doesn't Work with unmountOnExit?

Question

I created a transition with react-transition-group and added unmountOnExit, which causes the enter animation not to work. When removing unmountOnExit, the enter animation works.

Here is a CodeSandbox demo

I opened an issue on GitHub but I was wondering if there was anything wrong with my code.

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out, transform ${duration}ms ease-in-out`,
  opacity: 0,
  transform: 'scale(.1)',
};

const transitionStyles = {
  entering: { opacity: 1, transform: 'none' },
  entered: { opacity: 1, transform: 'none' },
  exiting: { opacity: 0, transform: 'scale(.1)' },
  exited: { opacity: 0, transform: 'scale(.1)' },
};

const FadeScaleAlert = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration} unmountOnExit>
    {(state) => (
      <Alert
        variant="primary"
        style={{
          ...defaultStyle,
          ...transitionStyles[state],
        }}
      >
        <Alert.Heading>
          Animated alert message
        </Alert.Heading>
        <p>
          This alert message is being transitioned in and
          out of the DOM.
        </p>
      </Alert>
    )}
  </Transition>
);