Semantic UI React component to transition between two elements

AnimatedTransition.tsx

import React, { ReactElement, useEffect, useState } from 'react'
import { SemanticTRANSITIONS, Transition, TransitionPropDuration } from 'semantic-ui-react'

interface AnimatedTransitionProps {
  animation?: SemanticTRANSITIONS
  duration?: number | string | TransitionPropDuration
  children: ReactElement
}

const AnimatedTransition = ({children, animation, duration} : AnimatedTransitionProps) => {
  const [renderdChild, setChild] = useState<ReactElement>(children)
  const [visible, setVisibility] = useState<boolean>(true)
  useEffect(() => {
    setVisibility(false)
  }, [children.key])
  const onHide = () => {
    setChild(children)
    setVisibility(true)
  }

  return (
    <Transition
      animation={animation}
      duration={duration}
      onHide={onHide}
      visible={visible}
      >
      {renderdChild}
    </Transition>
  )
}

export default AnimatedTransition

example.tsx

import React, { useState } from 'react'
import { Header, Button, icon } from 'semantic-ui-react'
import AnimatedTransition from './AnimatedTransition'

/*
Example usage of the AnimatedTransition component.

Note the "key" prop on the Header, that's the magic that triggers the transition.
*/

const Example = () => {
  const [state, setState] = useState<boolean>(false)

  return (
    <Fragment>
      <AnimatedTransition animation="scale">
        <Header icon key={state.toString()}>
          <Icon name={state ? 'dashboard' : 'mobile'} />
          This thing is {state.toString()}
        </Header>
      </AnimatedTransition>
      <Button onClick={() => setState(!state)}>
        Toggle
      </Button>
    </Fragment>
  )
}