This is rendered in Modal, now the problem is when i close the modal and open another, there's 2 instance one running in display and the previous one that is running in background waiting to finish typing.

  <Typewriter
    options={{delay: 50, loop: false}}
    onInit={typewriter => {
      typewriter
        .typeString(newMessage)
        .pauseFor(1000)
        .callFunction(() => {
         // this is called when newMessage completes typing
          if (trackId) {
            setShow(true);
          }
        })
        .start();
    }}
  />

what i want to do is call a stop or restart of event so it won't reach the callFunction on the previous one that is running in background.

once handleCloseModal is called it should restart and only one Typewriter should start

  const handleCloseModal = () => {
    Typewriter.restart()
  };

is this possible? and how can i achieve this using react?