Reactjs – Giving id to element and consoling not working outside of useEffect and functions

I have thid component

import { useState, useEffect } from "react"

export default function profile() {

  const [text, setT] = useState("")

  const f = () => console.log(hiop)

  const t = "hi boy how r u "

  function type(s = 100, i = 0, d = 0) {

    setInterval(() => (

      d == 0 ? i++ : i--,

      i >= t.length && d == 0 ? d = 1 : i == 0 ? d = 0 : 0,

      setT(t.slice(0, i))), s)

  }

  useEffect(() => {

    type()

    console.log(hiop)

  }, [])

  return (

    <h1 id="hiop" onClick={f}>{text}</h1>

  )

}

Can anybody tell me why its not working outside of useEffect and callback functions when I console the hiop element and why does it work when I put this console in useEffect and callback functions like onclick onsubmit