Css + Javascript Parallax effect Z-Value not working

I'm making a website and I wanted to integrate a parallax effect that responds to your mouse movement. Everything seems to work accept for the z value which adds depth to it. I have 2 different functions because I want one of them to go into different directions.

(The problem is mainly with the parallax function, not the spacer one) So whenever I set the zValue to a fixed value everything seems to work fine, but that also doesn't give the effect I'm looking for. The problem has something to do with the clientX value, but I can't figure out why it doesn't give me the distance that the cursor is away from the element. It should return the distance between the element and the cursor and then get multiplied y isInLeft which will make it change direction if it's on the other side of the screen.

Here is the Javascript:

const parallax_el = document.querySelectorAll(".parallax");
const spacer_el = document.querySelectorAll(".spacer");

let xValue = 0,
  yValue = 0;

let rotateDegree = 0;

function update(cursorPosition) {
    parallax_el.forEach(el => {
        let speedx = el.dataset.speedx;
        let speedy = el.dataset.speedy;
        let speedz = el.dataset.speedz;
        let rotateSpeed = el.dataset.rotation;
  
        let isInLeft = 
          parseFloat(getComputedStyle(el).left) < window.innerWidth / 2 ? 1 : -1;
        let zValue =
          (e.clientX - parseFloat(getComputedStyle(el).left)) * isInLeft * 0.1;
  
        el.style.transform = `perspective(2300px) translateZ(${
           zValue * speedz
        }px) rotateY(${rotateDegree * rotateSpeed}deg) translateX(calc(-50% + ${
           -xValue * speedx
        }px)) translateY(calc(-50% + ${-yValue * speedy}px))`;
    });
}

function updateSpacer(cursorPosition) {
    spacer_el.forEach(el => {
        let speedx = el.dataset.speedx;
        let speedy = el.dataset.speedy;
        let speedz = el.dataset.speedz;
        let rotateSpeed = el.dataset.rotation;

        let zValueSpacer = 100

        el.style.transform = `perspective(2300px) translateZ(${
            zValueSpacer * speedz
        }px) rotateY(${rotateDegree * rotateSpeed}deg) translateX(calc(-50% + ${
            xValue * speedx
        }px)) translateY(calc(-50% + ${yValue * speedy}px))`;
    });
}

update(0);
updateSpacer(0);

window.addEventListener("mousemove", (e) => {
    xValue = e.clientX - window.innerWidth / 2;
    yValue = e.clientY - window.innerHeight / 2;

    rotateDegree = (xValue / (window.innerWidth / 2)) * 20;

    update(e.clientX);
    updateSpacer(e.clientX);
});

My html and css are pretty long so I'm only gonna put some css here that might mess with it:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-family: 'Roboto';
}

body{
    background: var(--primary-color);
    overflow-x: hidden;
}

main{
    padding-top: 6rem;
    margin-right: 1rem;
    margin-left: 1rem;
    margin-bottom: 2rem;
    position: relative;
    color: var(--secondary-color);
}

.parallax{
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: 0.45s cubic-bezier(.2,.49,.32,.99);
}

.para-space{
    height: 85rem;
    background-color: var(--tertiary-color); /*TEMP*/
}

.spacer{
    aspect-ratio: 1000/300;
    width: 130%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    pointer-events: none;
    top:calc(50% - 350px);
    left: calc(50% + 10px);
    transform: translate(-50%, -50%);
    transition: 0.45s cubic-bezier(.2,.49,.32,.99);
    z-index: 137;
}

.wave-1{
    background-image: url('media/wave-1.svg');
    margin-top: 1rem;
}

.wave-2{
    background-image: url('media/wave-2.svg');
    margin-top: 65rem;
}

.main-text{
    position: absolute;
    text-align: center;
    top: calc(50% + 0px);
    left: calc(50% + 0px);
}

.main-text h1{
    font-size: 5rem;
    font-family: 'Roboto';
}

Most of it doesn't make sense without the html, but I've tried using images instead of other elements. (The .svg files are only affected by the .spacer function so they have a fixed zValue of 100.)

Found the issue, I updated the function with cursorPosition and I frogot to replace e.clientX with it. I forgot that e.clientX cannot be used outside of the Eventlistener

Fixed