title: Animating div to move between container divs in React - react-pose?
body: <p><a href="https://codesandbox.io/s/jvq5yk1n29" rel="nofollow noreferrer">https://codesandbox.io/s/jvq5yk1n29</a></p>
  
  <p>This little sandbox moves a dot back and forth between five <code>material-ui</code> <code>Paper</code> boxes when arrow keys are pressed. How would I create a smooth animation as it moves from box to box? I came up with a very convoluted <code>react-pose</code> solution that constantly polls the <code>getClientBoundingRect()</code> on the container DOM elements in order to move the dot with absolute coordinates. But that's just a pain. There must be something more elegant? I can't use CSS (?) since the div is constantly being remounted, leaving nothing for an animation to hook onto. What gives?</p>