javascript – How can I begin and cease the textual content animation loop from iTyped?

I’m utilizing React, MUI, and iTyped

I’ve an animation that backspaces some textual content, and kinds the following phrase within the array out. Finally it get’s to the tip of the animation the place the final phrase of the array is displayed. I would love to have the ability to click on on the div containing this animation to as soon as once more begin up the animation.

 const typedCaller = () => {
    init(textRef.present, {
      showCursor: false,
      backDelay: 1500,
      loop: false,
      strings: ['Developer', 'Trainer', 'Administrator']
    })
  }

  const typedCaller2 = () => {
    init(textRef.present, {
      showCursor: false,
      backDelay: 1500,
      loop: false,
      strings: ['Developer', 'Trainer', 'Administrator']
    })
  }


  const textRef = useRef();

  useEffect(() => {
    typedCaller();
  },[])

return(
<Description className="SubText" onClick={typedCaller}>
    {description1} <span ref={textRef}></span>
</Description></Field>
)

What occurs is on the finish of the animation I’ve textual content that sais ‘Administrator’. After I click on on this, ‘Developer’ begins getting typed out in entrance of it. The complete factor then will get backspaced, and solely a single occasion of ‘Coach’ get’s typed, and so forth earlier than the animation ends.

Just about I must backspace the leftover textual content from the primary animation onClick, or I want a technique to toggle the loop: false/true property in order to begin and cease the animation. Anyhelp is tremendously appreciated!