multiple console logs????

I have no clue why there are multiple console logs on page load. There should only be one.

const words = ['innovative<br/>thinker', 'creative<br/>mind', 'web<br/>designer'];

const determineArticle = () => {
        const word = words[currentWordIndex];
        console.log(word);
        const vowels = ['a', 'e', 'i', 'o', 'u'];
        const firstLetter = word.toLowerCase()[0];
        console.log(vowels.includes(firstLetter) ? 'an' : 'a');
    }

    const [currentWordIndex, setCurrentWordIndex] = useState(0);

    useEffect(() => {
        if (Number.isInteger(currentWordIndex)) determineArticle();
    }, [currentWordIndex]);

    const typeWord = async (typewriter) => {
        for (let i = 0, len = words.length; i < len; i++) {
            await new Promise((resolve) => {
                typewriter
                    .callFunction(() => {
                        if (currentWordIndex == 15) setCurrentWordIndex(0);
                        setCurrentWordIndex((prevIndex) => prevIndex + 0.5);
                        resolve();
                    })
                    .typeString(words[i])
                    .pauseFor(2500)
                    .deleteAll()
                    .start();
            });
        }
    };

HTML:

<TypeWriter
    options={{
    autoStart: true,
    loop: true,
}}
    onInit={(typewriter) => {
          typeWord(typewriter);
    }}
/>

I cant figure out why it console logs so much on page load it should only do it once per iteration.
Modules used: React, typewriter-effect.

Thanks in advance.