Select an element having conditional render, on the beginning of the code in react.js

I’ve made 2 popup div in react. On the first page load, first popup is visible but i’ve set the opacity of second popup to 0. I’m handling this with a class ‘hide’. And i’m placing this hide class on the second popup based on a state. What i’m trying to achieve here is that i want to select a button having a class of ‘evil-btn’ that is present on the second popup. And add some event listeners to that button. But i’m not able to select that button, as a global variable. It’s returning null. So can anyone suggest me a way how i can select this button in the global scope..?? Below is the code for my Popup component.

import React, { useEffect, useRef, useState } from "react"

function Popup() {
  const [isSecondActive, setIsSecondActive] = useState(false)
  const [firstBtn, setFirstBtn] = useState(true)
  const [secondBtn, setSecondBtn] = useState(false)
  const container2_ref = useRef(null)
  console.log(container2_ref)

  const OFFSET = 100

  const handleMouseOver = (e) => {
    console.log(e.target.innerText)
    if (e.target.innerText === "NO") {
      setFirstBtn(!firstBtn)
      setSecondBtn(!secondBtn)
    }
  }

  const handleClick = (e) => {
    console.log(e.target.innerText)
    if (e.target.innerText === "YES") {
      alert("I Knew You Were Dumb!!")
    }
  }

  const handleSecondClick = (e) => {
    console.log(e.target.dataset.name)
    if (e.target.innerText === "YES") {
      alert("I Knew You Were Dumb!!")
    }

    if (e.target.innerText === "NO") {
      alert(
        "I hate you, you clicked me so hard, I'm going and closing this window"
      )
      // window.close()
    }
  }

  var evilBtn = document.querySelector(".evil-btn")

  document.addEventListener("mouseover", (e) => {
    const x = e.pageX
    const y = e.pageY
    const buttonBox = evilBtn.getBoundingClientRect()
    // console.log("x", x)
    // console.log("y", y)
    let horizontalDistanceFrom = distanceFromBtn(
      buttonBox.x,
      x,
      buttonBox.width
    )
    let verticalDistanceFrom = distanceFromBtn(buttonBox.y, y, buttonBox.height)

    const verticalOffset = buttonBox.height + OFFSET / 2
    const horizontalOffset = buttonBox.width + OFFSET / 2

    if (
      Math.abs(
        horizontalDistanceFrom <= horizontalOffset &&
          Math.abs(verticalDistanceFrom <= verticalOffset)
      )
    ) {
      setButtonPosition(
        buttonBox.x + (horizontalOffset / horizontalDistanceFrom / 2) * 10,
        buttonBox.y + (verticalOffset / verticalDistanceFrom / 2) * 10
      )
    }
  })

  const setButtonPosition = (left, top) => {
    console.log(evilBtn)
    evilBtn.style.left = `${left}px`
    evilBtn.style.top = `${top}px`
  }

  const distanceFromBtn = (buttonPosition, mousePosition, buttonSize) => {
    return buttonPosition - mousePosition + buttonSize / 2
  }

  return (
    <div className='container'>
      <div className='popup'>
        <section className='section-top'>
          {/* CONTAINER 2 START */}
          {
            <div
              ref={container2_ref}
              className={`container second-container container-2 ${
                isSecondActive ? "" : "hide"
              }`}
            >
              <div className='popup'>
                <section className='section-top'>
                  <button
                    onClick={() => setIsSecondActive(false)}
                    className='close-btn'
                  >
                    X
                  </button>
                </section>
                <section className='section-middle'>
                  <h2 className='heading-msg'>
                    Do you really want to quit? But first tell me are you
                    dumb..??
                  </h2>
                </section>
                <div className='btn-containers'>
                  <button
                    data-name='second-yes'
                    onClick={handleSecondClick}
                    className='btn yes-2'
                  >
                    YES
                  </button>
                  <button
                    data-name='second-no'
                    onClick={handleSecondClick}
                    className='btn no-2 evil-btn'
                  >
                    NO
                  </button>
                </div>
              </div>
            </div>
          }
          {/* CONTAINER 2 END */}
          <button onClick={() => setIsSecondActive(true)} className='close-btn'>
            X
          </button>
        </section>
        <section className='section-middle'>
          <h2 className='heading-msg'>Are You Dumb..??</h2>
        </section>
        <div className='btn-container'>
          <button
            onClick={handleClick}
            onMouseOver={handleMouseOver}
            data-name='first-yes'
            className='btn yes-1'
          >
            {firstBtn ? "YES" : "NO"}
          </button>
          <button
            onClick={handleClick}
            onMouseOver={handleMouseOver}
            data-name='first-no'
            className='btn no firstNo'
          >
            {secondBtn ? "YES" : "NO"}
          </button>
        </div>
      </div>
    </div>
  )
}

export default Popup