Improving/cleaning two separate typeWriter functions into one

Question

I have a typeWriter function, which allows a div to pop up and iterate through the text provided. Once the page has been visited for the first time, I'm setting the localStorage where if the user visits the same page again, a different text will be represented. So far I have everything working, but I'm trying to clean the code, as I feel it should be possible to make use of one function instead of two, I've tried different way's on doing this but, if I parse the text through the function then it would end up popping an error of "length" being undefined in the console. Any help would be appreciated.

This is what I have:

const [dialog, setDialog] = useState(false);
    const [pass, setPass] = useState(false);

    let introTxt = "Hi there, my name is Mario and I'm here to assist you, let's get you started by signing you in.";
    let welcomeTxt = "Welcome Back!"
    let i = 0;
    let speed = 70;
    
    useEffect(() => {
        if(!localStorage.getItem('dialog')){
            localStorage.setItem('dialog', true)
            setTimeout(() => {
                setDialog(true);
                introWriter();
            }, 2000);
        } else {
            setTimeout(() => {
                setDialog(true);
                welcomeWriter();
            }, 2000);
        }
    },[]);

    function introWriter(){
        if(i < introTxt.length){
            document.getElementById("text").innerHTML += introTxt.charAt(i);
            i++;
            setTimeout(introWriter , speed);
        }
    }

    function welcomeWriter(){
        if(i < welcomeTxt.length){
            document.getElementById("text").innerHTML += welcomeTxt.charAt(i);
            i++;
            setTimeout(welcomeWriter , speed);
        }
    }

And this is what I've tried doing:

In the console "length" is undefined and only the first character is being outputted.

    const [dialog, setDialog] = useState(false);
    const [pass, setPass] = useState(false);

    let introTxt = "Hi there, my name is Mario and I'm here to assist you, let's get you started by signing you in.";
    let welcomeTxt = "Welcome Back!"
    let i = 0;
    let speed = 70;
    
    useEffect(() => {
        if(!localStorage.getItem('dialog')){
            localStorage.setItem('dialog', true)
            setTimeout(() => {
                setDialog(true);
                typeWriter(introTxt);
            }, 2000);
        } else {
            setTimeout(() => {
                setDialog(true);
                typeWriter(welcomeTxt);
            }, 2000);
        }
    },[]);

    function typeWriter(text){
        if(i < text.length){
            document.getElementById("text").innerHTML += text.charAt(i);
            i++;
            setTimeout(typeWriter , speed);
        }
    }

I know that it should be setTimeout(typeWriter(text) , speed); within the function, but I'm losing the idea on of displaying each character on every iteration, where as it would simply throw the entire sentence out in one shot losing the typewriter effect.