Монтирование и размонтирование

Подскажите, пжлста, имеется компонент

export type TTextTyperProps = {
  text: string
  speed: 'high' | 'low' | 'normal'
}

const typerSpeed = {
  high: { start: 100, end: 200 },
  normal: { start: 200, end: 300 },
  low: { start: 300, end: 400 },
}

const TextTyper: FC<TTextTyperProps> = (props) => {
  const { text, speed } = props

  const [visibleText, setVisibleText] = useState({
    text: '',
    ind: 0,
  })
  const [isKaretVisible, setIsKaretVisible] = useState(false)

  useEffect(() => {
    if (text !== '') {
      activateKaret()
      setTimeout(() => {
        activateTyper()
      }, 2000)
    }
  }, [text])

  const activateTyper = () => {
    setTimeout(() => {
      if (visibleText.text === text) {
        setIsKaretVisible(false)
        return
      }

      setVisibleText({
        text: (visibleText.text += text[visibleText.ind]),
        ind: (visibleText.ind += 1),
      })
      activateTyper()
    }, getRandomInteger(typerSpeed[speed]))
  }

  const activateKaret = () => {
    setTimeout(() => {
      if (visibleText.text === text) {
        setIsKaretVisible(false)
        return
      }

      setIsKaretVisible((prevIsKaretVisible) => !prevIsKaretVisible)
      activateKaret()
    }, 500)
  }

  return (
    <div className={styles.textTyper}>
      {visibleText.text}
      <div
        className={isActive
    ? `${styles['karet']} ${styles[`${'karet'}Active`]}`
    : styles['karet']}
      ></div>
    </div>
  )
}

export default TextTyper

имеется проблема следующего рода, каретка меняет класс, только во втором случае, я понимаю, что проблема связана как то с монтированием, но, понять не могу

1.{hint && <TextTyper text={hint} speed={'high'} />}
2. <TextTyper text={hint} speed={'high'} />