Replaying ThreeJs Animation with Button Interactions

Question

I am working on developing a Web-AR animation on 8th Wall and have a model which includes 5 animations. Those animations belong to different components of the model. I want to interact with animations via buttons on the screen. Thanks to these buttons, sometimes more than one animation can be played at the same time.

Here are my problems:

I want to play those animations more than once and also they need to be paused on their last frame. I have searched on the web about animation pausing on the last frame and I found "clampWhenFinished" property of animation-mixer component.

Problem is that if I used "clampWhenFinished: true" property with "loop: repeat", it does not stop on the last frame. On the other hand, if I used "clampWhenFinished: true" property with "loop: once", it does stop on the last frame but when I push the button that starts the same animation again, it does not play animation again.

You can see the relevant code snippet below. I have tried to handle problem above with timeout functions but it causes so many bugs. Addition to that, I have tried to handle this problem with "timeScale" property because I could not use "clampWhenFinished: true" property with "loop: repeat".

const modelTop = document.getElementById('model_top')
const animationList = ['Animation_Door_Open', 'Animation_Door_Close', 'Animation_Basket_Low', 'Animation_Basket_Mid', 'Animation_Basket_Top']

topButton.onclick = topBasket
// Play animation.
const topBasket = () => {
  modelTop.setAttribute('animation-mixer', {
    clip: animationList[4],
    timeScale: 1,
    loop: 'repeat',
  })

// Pause animation.
  setTimeout(() => {
    modelTop.setAttribute('animation-mixer', {
      clip: animationList[4],
      timeScale: 0,
      loop: 'repeat',
    })
  }, 1900)
}

// Play animation reverse.
const topReverse = () => {
  modelTop.setAttribute('animation-mixer', {
    clip: animationList[4],
    timeScale: -1,
    loop: 'repeat',
  })

  // Pause animation.
  setTimeout(() => {
    modelTop.setAttribute('animation-mixer', {
      clip: animationList[4],
      timeScale: 0,
      loop: 'repeat',
    })
  }, 1800)
  isTopOpen = false
}

Second problem is that, I want to trigger an animations when other animation is finished. Is there any options like "event listener" to solve this issue?