AnimatedGroup

() => {
  const [direction, setDirection] = useState()
  const [key, setKey] = useState()
  function generateUID() {
    return Math.random()
      .toString(36)
      .replace(/[^a-z]+/g, '')
      .substr(2, 10)
  }
  function handleForwardClick() {
    setDirection('forward')
    setKey(generateUID())
  }
  function handleBackClick() {
    setDirection('back')
    setKey(generateUID())
  }
  return (
    <>
      <ButtonBar>
        <Button
          onClick={handleForwardClick}
          variant="contained"
          color="primary"
        >
          Back
        </Button>
        <Button onClick={handleBackClick} variant="contained" color="primary">
          Forward
        </Button>
      </ButtonBar>
      <div style={{ width: '200px', padding: '8px' }}>
        <AnimatedGroup
          direction={direction}
          durationMsecs={5000}
          movement={200}
          transitionKey={key}
        >
          <AddYourComponentHere />
        </AnimatedGroup>
      </div>
    </>
  )
}