How to pass a value or props to a css style file

I need to update the x and y position where a user clicks to populate the top and left properties of a div:

.dataCardAbsolute {
  position: absolute;
  top: 100px;
  left: 300px;
  overflow: auto;
}

  React.useEffect(() => {
    document.body.addEventListener('click', (event) => { setPosition([event.pageX, event.pageY]) })
  }, []);

  <div
  className={{styles.`dataCardAbsolute-${}`}} //an attempt...
  className={styles.dataCardAbsolute}         
 >

How do I pass the updated position to the css file?

>Solution :

I’m assuming the state for the setter function is position so is the code to update it, you would have to update it via inline styles, this would be the easiest route.

 <div
      className={styles.dataCardAbsolute}
      style={{ top: `${position.top}px`, left: `${position.left}px` }}
    >