react-typist | Typing animations with React | User Interface library

I am trying to implement a delayed typing animation in React, which when started, removes the placeholder text. My attempt to do so, has been by setting state after a timeout, and then render the animation and remove the placeholder when the state is true.

However, using setTimeout outputs some 'random' numbers in its container, and I have not been able to figure out why - I assume that the numbers rendered is the time in milliseconds for the timeout, they only change a few times before stopping.

The output can be seen here:

And an example of the entire component can be seen here:

Essentially I am trying to animate a chat correspondence, and need to render a div looking like an input field. The div has a default placeholder text which needs to be removed after xxxx milliseconds after which the Typist text is rendered displaying the typing animation.

The Chat component depicted below uses a number state as well as a function to increase the number. The number state is used to identify which chat bubbles have already been rendered, since the bubbles have an animation callback which is where the state is being changed - to ensure that the next chat bubble does not start animating in, until the prior one is completely done.

The problem is that I need a timeout to occur when the 'input field' is rendered, since the user has to see the placeholder for a couple of seconds before the typing animation from Typist is triggered.

Chat.jsx