React Js Changing/shuffling text every Interval Time

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>

function App() {
      const textArray = ['Sarkari Naukri Exams', 'Tutorials Plane', 'Google', 'Bard', 'Microsoft', 'Apple', 'Chatgpt', 'font awesome icons'];
      const wordInterval = 150; // 0.1 seconds in milliseconds

const [currentIndex, setCurrentIndex] = useState(0);
      const [currentWordIndex, setCurrentWordIndex] = useState(0);
      const [isDeleting, setIsDeleting] = useState(false);
      const [showBlink, setShowBlink] = useState(true);

useEffect(() => {
        const animateWords = () => {
          if (isDeleting) {
            if (currentWordIndex > 0) {
              setCurrentWordIndex((prevIndex) => prevIndex - 1);
            } else {
              setIsDeleting(false);
              setCurrentIndex((prevIndex) => (prevIndex + 1) % textArray.length);
            }
          } else {
            if (currentWordIndex < textArray[currentIndex].length) {
              setCurrentWordIndex((prevIndex) => prevIndex + 1);
            } else {
              setIsDeleting(true);
            }
          }
        };

// Set an interval to animate text
        const intervalId = setInterval(animateWords, wordInterval);

// Clean up the intervals on component unmount
        return () => {
          clearInterval(intervalId);
        };
      }, [currentIndex, currentWordIndex, isDeleting]);

const textThatChanges = textArray[currentIndex];

return (
        <div className="container">
          <h3 className="title">React Js Changing/shuffling text every 1.5 second</h3>
          <h3 className="changing-text">
            This is{' '}
            <span style={{color:'blue'}}>{textThatChanges.slice(0, currentWordIndex)}</span>

</h3>
        </div>

);
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

.title {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }

.changing-text {
      font-size: 36px;
    
      /* You can change this color to your preference */
      margin-top: 20px;
    }

.changing-text::after {
      content: '|';
      display: inline-block;
      animation: blink 1.5s infinite alternate;
    }

@keyframes blink {
      0% {
        opacity: 0;
      }

100% {
        opacity: 1;
      }
    }
  </style>
</body>

</html>