Translate animation

I have a demo here https://codesandbox.io/s/morning-waterfall-6brec?file=/src/App.js

click the blue box to have it move back and forth between parent elements.

Is there a way to get a smooth animation here?

Start with the CodeSandbox demo at src/App.js and reproduce the behavior by clicking the blue box as it moves between parent elements. Investigate how the React transition is currently triggered and define what smooth animation should mean for that movement; the work is done when the demonstrated transition is consistently smooth.

Written by the indexing model from the issue text.