Как добавлять символ к строке раз в пол секунды?

Помогите, пожалуйста, отладить код...

Делаю такое приложение (см скриншот). При нажатии на кнопку "лень писать, зовите обезьян" в поле слева должны раз в пол секунды добавляться случайные символы (сейчас просто "а" вместо случайных) - как будто человек (или обезьяна) случайным образом бьёт по клавиатуре. Никак не получается это реализовать.

Приложение использует связку React18.2\Redux4.2

Я сделала компонент кнопки "лень писать зовите обезьян" так как показано ниже, но оно некорректно работает.

Сперва добавляется просто "a", а при повторном нажатии ещё одна "а" и вторая начинает мигать. Если нажимать ещё, то мигает быстрее.

Что нужно сделать, чтобы работало правильно?

import React, { useState, useEffect } from 'react';  
import Button from 'react-bootstrap/Button';  
import { changeUserText } from '../../store/TextSlice'  
import { useAppSelector, useAppDispatch } from '../../store/Hooks'  
  
const Laziness = () => {  
    const dispatch = useAppDispatch()  
  
    const [autotext, setAutotext] = useState(false);      
    const userText = useAppSelector(state => state.Text.userText)  
  
    useEffect(() => {  
        if (autotext) {  
            setInterval(()=>{  
                dispatch(changeUserText(userText + 'a'))                  
            }, 500)              
        }           
    }, [autotext]);      
  
    const handleWriting = () => {  
        setAutotext(!autotext)                 
    }  
  
    return (  
        <>  
            <Button   
            style={{"margin": "0px 0px 20px 10px"}}  
            variant="dark"   
            type="submit"   
            onClick={handleWriting}>  
                {autotext ? 'Остановите обезьян!' : 'Лень писать, зовите обезьян!'}                  
            </Button>  
        </>  
    )  
}  
  
export default Laziness

Редьюсер выглядит так:

changeUserText: (state, action: PayloadAction<string>) => {
      
      state.userText = action.payload
      
      if (state.loadedText.length === 0) {
        alert("Текст не загружен. Прежде чем начать, нажми «Загрузить текст» и напиши там что-нибудь.")
        state.userText = ""
        state.identicText = ""
      }
      if (state.userText.length > state.loadedText.length) {
        state.counter = Math.floor((state.userText.length - 1) / state.loadedText.length)
      } else {
        state.counter = 0
      }

      state.pointer = state.userText.length - state.loadedText.length * state.counter - 1

      const replaceAt = (str: string, index: number, replacement: string) => {
        return str.substring(0, index) + replacement + str.substring(index + replacement.length);
      }
      let a = state.loadedText[state.pointer].toLowerCase()
      let b = action.payload[action.payload.length - 1].toLowerCase()
        if (
          state.identicText[state.pointer] === "."
          && a === b
        ) {
          state.identicText = replaceAt(state.identicText, state.pointer, state.loadedText[state.pointer])
        }
    }

Собственно большая часть кода в редьюсере нужна для обработки логики взаимодействия с правым полем, но для контекста его тоже решила добавить в вопрос.