so i created a typewriter effect for writing text then deleting it infinitely

import React, { useState, useEffect, useRef } from 'react';

const Typewriter = ({ text, customColor }) => {
  const [output, setOutput] = useState('');
  const stepRef = useRef(0);
  const shouldDeleteRef = useRef(false);
  console.log("Typing:", text);

  useEffect(() => {
    const typeWriter = async (text) => {
      for (let i = 0; i < text.length; i++) {
        console.log("Adding character:", text.charAt(i)); 
        setOutput(text.substring(0, i + 1)); 
        await new Promise((r) => setTimeout(r, 100));
      }
      await new Promise((r) => setTimeout(r, 1000));

      for (let i = text.length; i > 0; i--) {
        console.log("Deleting character:", text.charAt(i - 1)); 
        setOutput(text.substring(0, i - 1)); 
        await new Promise((r) => setTimeout(r, 100));
      }

      await new Promise((r) => setTimeout(r, 1000));

      typeWriter(text);
    };

    typeWriter(text);
  }, [text]);

  const cursorStyle = {
    display: 'inline-block',
    width: '0.1em',
    height: '1em',
    marginLeft: '0.25em',
    backgroundColor: customColor || 'white',
    animation: 'blink 1s infinite',
  };

  return (
    <span style={{ color: customColor, fontFamily: 'monospace' }}>
      {output}
      <span style={cursorStyle}></span>
    </span>
  );
};
export default Typewriter;

this is the closest i have gotten it to work, it just stands at the blinking cursor though, unsure why, and in logs it only says “Typing: example” never logging anything else, cant tell if im being stupid, i have not done much web development in the past, and i am pretty tired at the moment