Inconsistency for loops in Safari browser

[asdacosta]

Description

I am using typed.js to animate input placeholders. On Google Chrome, the typing effect behaves normal even when I resize the screen. I used the typed library it in a useEffect hook with an empty array list.

On Safari browser in my iPhone 7 plus, a quick inconsistent type occurs when a new loop of the stirngs is about to begin.It behaves as if there is a condition specified in the useEffect hook and a dependency or variable specified in the array list to re-render (I tried to use a condition and a dependency in Chrome and it had similar effect). So basically the typing effect in the Safari behaves normal but when the loop ends and it is about to start again, it behaves inconsistently.

I would like to understand the problem and the solution.
This is the code:

 const typeFieldPlaceholder = (ref, placeholder) => {
  const typed = new Typed(ref.current, {
   strings: placeholder,
   typeSpeed: 40,
   backSpeed: 20,
   backDelay: 1200,
   attr: "placeholder",
   loop: true,
   smartBackspace: true,
   showCursor: false,
  });
  return typed;
 };

 useEffect(() => {
  const typed = typeFieldPlaceholder(typingNameRef, placeholders.names);
  return () => {
   typed.destroy();
  };
 }, []);

Demo

[If possible, include a demo of your issue in a fork of this JSFiddle: https://jsfiddle.net/mattboldt/1xs3LLmL/]

Steps to Reproduce

1. [First Step]
2. [Second Step]
3. [and so on...]

Expected behavior: Consistent typing effect in loops.

Actual behavior: When a loop ends, there is an inconsisteny before the next loop.

Reproduces how often: [What percentage of the time does it reproduce?]

Additional Information

Any additional information, configuration or data that might be necessary to reproduce the issue.