Pause in gsap doesn’t work again with onComplete

By default I use the animation for the 3d scene, it creates a “levitation” for the object. Every time you hover over an object, it should pause, but the pause only occurs immediately after the animation starts. I understand it has to do with onComplete. How to stop animation every time?

function tweenProperty(target, x, propX, y, propY, z, propZ) {
  const randomDur = gsap.utils.random(0.5, 2, true)
  const randomDelay = gsap.utils.random(0, 1, true)

  const animate = gsap.to(target, {
    [x]: gsap.utils.random(propX * -1, propX),
    [y]: gsap.utils.random(propY * -1, propY),
    duration: randomDur(),
    delay: randomDelay(),
    ease: 'sine.inOut',
    onComplete: tweenProperty,
    onCompleteParams: [target, x, propX, y, propY, z, propZ],
  })
  return animate
}

const obj = document.querySelector('.obj')

const scenePosAimate = tweenProperty(obj, 'x', 30, 'y', 30)

window.addEventListener('mousemove', (e) => {
   if (e.target.tagName.toLowerCase() === 'div') {
     scenePosAimate.pause()
   } else{ 
      scenePosAimate.play()
   }
})
.obj{
  width: 50px;
  height: 50px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<div class="obj"></div>