How to modify the DOM directly in ReactJS

Let's say I have two arrays selectedFoobars and unselectedFoobars. These are my data and they are rendered as lists next to each other using ReactJS.

When the user clicks on an element in one of the lists I want to remove the element from that list, and add it to the end of the other list. That part is pretty straight forward using React.

But, I want the clicked element to sweep across the screen from its old position to its new position in the other list. If the user clicks on and element in the middle of the unselectedFoobars that element should animate across the page to the bottom of the selectedFoobars list.

I don't just want the moved element to fade out it the first list and fade in in the second. That would have been easy though, by using the animation hooks provided the the animation addon for React.

That is one – as far as I can tell – valid example of a problem where one needs to modify the DOM directly to achieve the desired result.

Using Backbone.js one could easily do the DOM manipulation manually. This is straight forward and pretty clean in Backbone-world albeit quite but a bit of work. In AngularJS I'd create a directive. It would be pretty unidiomatic Angular. But it would get the job done.

What is the cleanest way to handle this and similar cases where direct DOM manipulation is needed using ReactJS?