React-Intl switching language cause the effect to mess with letters despite `key={locale}` used on `<Typing>`

[kopax]

Hello, I am reading the documentation and can't find how to use this component for my use case, if that's not the place to ask for help, please excuse me in advance and close it.

• The parent is a div while I wanted a span (Ok I can CSS it but this could be also passed as a props)
• I can't display a first text on landing (before the typing).

I managed to get something close to the desirect effect with :

<h3 className="inline">
  <Typing loop className="inline" key={locale}>
    <span>
      {occupation}
    </span>
    <Typing.Delay ms={1000} />
    <Typing.Backspace count={occupation.length + 1} />
    <span>
      {occupation2}
    </span>
    <Typing.Delay ms={1000} />
    <Typing.Backspace count={occupation2 + 1} />
  </Typing>
  .
  <br />{description}.
</h3>

1. How can I have the first sentence {occupation} displayed on landing.
2. How can I prevent rerendering when switching language with react-intl?

For (2), I have added key={locale} so it re-render the whole component, it work well, except when switching the language for the first time where it keep the first letter, then it work again if you keep switching language, how can I prevent that?

[kopax]

Hi again @notadamking, I just uploaded a demo of the bug available here, to see the bug, switch the language by clicking on fr or en, then watch the word being typed being misspelled.

I have tried a few way to fix it but none of them is satisfying, do you have an idea on how I can use it without showing such a wrong thing on my splash landing screen?