It's kinda counterintuitive to have an element called <Animation />.
What happens if I render it two times in a row before it's done animating?
That may sound pedantic but the distinction is important.
React components aren't a "virtual DOM", they are a "component tree" that gets synced to the DOM. A component may or may not correspond to one or more elements in the DOM and it may wrap other components.
Thinking of "rendering" a component as "syncing the DOM" seems to be a common misunderstanding, especially when it comes to performance concerns (because manipulating the DOM unnecessarily is bad).