title: document.querySelector() returning null, while using module.csss
body: <p>So, I'm trying to make an animation when the element get's hovered. The animation will be responsible to scale the item. And for the user to be able to click the arrow icon (CardArrow), i will have to set transparent box zindex to -1. Because if i don't, the transparentBox will cover the arrow. I don't know why transparentBox is returning null...</p>
  <pre><code>import styles from &quot;./CardBox.module.css&quot;;
  import { motion } from &quot;framer-motion&quot;;
  
  const CardBox = (props) =&gt; {
    const { icon, text1, text2 } = props;
  
    function zindexHandler(){
      var transparentBox = document.querySelector(`.${styles[&quot;transparent-box&quot;]}`)
      console.log(transparentBox)
    }
  
    const [scale, setScale] = useState(false);
    return (
      &lt;Wrapper Class={styles.wrapper}&gt;
        &lt;CardArrow
          OnClick={props.cardChanger}
          Class={styles[&quot;card-arrow__left&quot;]}
        /&gt;
        &lt;motion.div animate={{scale: scale ? 1.1 : 1}} onMouseEnter={() =&gt; {setScale(true)}} onMouseLeave={() =&gt; {setScale(false)}}&gt;
          &lt;div className={styles[&quot;transparent-box&quot;]}&gt;
            &lt;div className={styles[&quot;main-boxes__box&quot;]}&gt;
              &lt;div className={styles[&quot;boxes-box__icon&quot;]}&gt;{icon}&lt;/div&gt;
              &lt;div className={styles[&quot;boxes-box__text&quot;]}&gt;
                &lt;h1&gt;{text1}&lt;/h1&gt;
                &lt;h2&gt;{text2}&lt;/h2&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/motion.div&gt;
        &lt;CardArrow
          OnClick={props.cardChanger}
          Class={styles[&quot;card-arrow__right&quot;]}
        /&gt;
      &lt;/Wrapper&gt;
    );
  };
  
  </code></pre>