title: getElementById returning null but getElementsByClassName works, why?
body: <p>I am really wondering why getElementById is returing null, where as same element I am able to access using get elements by className. It will be great if somebody helps me to understand what is causing this.
  Please find below code, its a functional react component where i am passing handleClose function  as props, which closes the modal, it just not needed so i have put only Modal component code.</p>
  
  <pre><code>import React, { useRef, useEffect } from 'react'
  
  const A11yModal = ({ handleClose }) =&gt; {
    const focusClose = useRef(null)
  
    var closeBtn_cls = document.getElementsByClassName("btn-close")
     var closeIcon=document.getElementById('btnclose')
  
    useEffect(() =&gt; {
      focusClose.current.focus();
      console.log("using Id",closeIcon);
      console.log("using ClassName",closeBtn_cls);
      }, [])
  
    function onKeyPressed(e) {
      if (e.keyCode === 27) {
        handleClose()
      }
    }
  
    return (
      &lt;div className="modal display-block"&gt;
        &lt;section className="modal-main" role="dialog"
          aria-modal="true" onKeyDown={(e) =&gt; onKeyPressed(e)}&gt;
          &lt;button className="btn-close" id="btnclose" onClick={(e) =&gt; handleClose(e)} ref={focusClose}&gt;
            X
          &lt;/button&gt;
          &lt;h1 id="modal_title" className="title" &gt;Modal&lt;/h1&gt;
          &lt;div id="full_description" className="description" aria-describedby="full_description"&gt;
            &lt;p&gt;Description goes here.&lt;/p&gt;
          &lt;/div&gt;        
          &lt;button className="close_btn" id="closebtn" onClick={(e) =&gt; handleClose(e)}&gt; Close &lt;/button&gt;     
        &lt;/section&gt;
      &lt;/div&gt;
    )
  }
  
  export default A11yModal
  </code></pre>