How do I select my CSS module class using document.querySelector?

I want to be able to select styles.scrollValue using the document.querySelector()

import { useEffect } from "react";
import styles from "./Navbar.module.scss";

const Navbar = () => {
  const handleScroll = () => {
    document.querySelector(styles.scrollValue).innerHTML = scrollY;
  };
  useEffect(() => {
    document.addEventListener("scroll", handleScroll);
    return () => {
      document.removeEventListener("scroll", handleScroll);
    };
  });
  return (
    <nav className={styles.navbar}>
      <div className={styles.content}>
        <h1 className={styles.scrollValue}>0</h1>
      </div>
    </nav>
  );
};

Running this code I get an error:

TypeError: document.querySelector(...) is null

I know I can add a global class to that element doing this:

className={`${styles.scrollValue} scrollValue`}

But that would ruin the advantage of using CSS Modules.

Is there a way to select the CSS Module class without adding another one to it?