There's no variable data, no runtime randomness, just pure confusion. Trying out the next and react 19 rc with compiler
definition:

'use client';

export default function Typewriter({ text }) {
    return (
        <>
            <span className="whitespace-pre-line">{text.substring(0, 0)}</span>
            <span className="whitespace-pre-line text-transparent">{text.substring(0)}</span>
        </>
    );
}

call site (also a client component):

<Typewriter text={'Hi.\nWelcome to my portfolio.'} />