The TransitionGroup element creates a wrapper element with the tag you declared in the tag property. This will manage the custom elements that will trigger the animation by checking the unique identity of the child elements by their unique keys. Because of this, all the child elements inside the TransitionGroup component need to have a key declared and have to be unique.
In our case, we created an HTML list using a combination of ul and li HTML elements, where TransitionGroup was defined with the ul tag and the child elements were defined with the li HTML elements. Then, we created a virtual iteration over a number. This means there will be a list of items and display images on-screen according to the number of items on that list.
To increase our list, we created a button HTML element that increased the count of the count variable by one each time it was pressed.