Semantic UI React Transition not animating

Question

I am trying to animate entry & exit of a React Class based component using React Semantic UI's Transition. But it's not working. See https://codesandbox.io/s/k23z06o43r?fontsize=14.

In the snippet, I have 3 experiments going:

1. Use Transition to animate entry and exit of a Class Component - Does not work
2. Same as above but the Class component is wrapped in a div within the Transition - Works as expected, but I don't want the div, if possible. Or at least understand why its necessary.
3. Same as 1) with unMount prop set for the Transition. - Does not animate the entry/exit, but mounts/unMounts the component.

Answer 1

Well, I myself never used this library, but it seems like the semantic-ui does not work properly with custome components inside of the transition component. You could use the Container component from semantic-ui and then simply pass in your custome component as a child, that works.