[Animate circle position using React and GSAP]

I have a React component that basically draw some svg circles. How can I create a transition/animation between the two renders? What I would like is to see the points move from one position to another.

const dataset = this.props.dataset
<App>
  {dataset.map((datum, i) => (
    <TheCircle
      key={i}
      datum={datum}
      xScale={xScale}
      yScale={yScale}
    />
  ))}
</App>

const TheCircle: React.FC<Props> = ({ datum, xScale, yScale }) => {
    const { x, y, country } = datum

    const cx = xScale(x)
    const cy = yScale(y)

    let dotRef = useRef(null).current
    useEffect(() => {
      TweenMax.to(dotRef, 5, {
        cx: cx,
        cy: cy,
        ease: 'bounce.out',
      })
    }, [])

    return (
      <g>
        <circle
          className=""
          fill="none"
          stroke="black"
          strokeWidth={1}
          cx={cx}
          cy={cy}
          r={10}
          ref={(element) => { dotRef = element }}
        />
      </g>
    )
  }

 

What I'm doing wrong?