How to make the picture not spin, but be in the same position when tracking the mouse movement

document.querySelector("body").addEventListener("mousemove", eyeball);

function eyeball() {
  const eye = document.querySelectorAll(".eye");
  eye.forEach(function(eye) {
    let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
    let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);

    let radian = Math.atan2(event.pageX - x, event.pageY - y);
    let rotation = (radian * (180 / Math.PI) * -1) + 270;
    eye.style.transform = "rotate(" + rotation + "deg)"
  });
}

.contact {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.box {
  display: flex;
  margin: 0;
  top: 35px;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  align-items: center;
  justify-content: center;
}

.box .eye {
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
  background-color: pink;
  border-radius: 50%;
  z-index: -1;
}

.box .eye::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 35px;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-image: url(https://cdn-icons-png.flaticon.com/512/179/179531.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
}

<section class="contact">
  <div class="box">
    <div class="eye"></div>
  </div>
</section>

document.querySelector("body").addEventListener("mousemove", eyeball);

function eyeball() {
  const pupils = document.querySelectorAll(".pupil");
  pupils.forEach((pupil) => {
    const mx = event.pageX
    const my = event.pageY
    // scale mouse position from screen space to percentages 15% - 85%
    const vx = scale(mx, 0, innerWidth, 15, 85)
    const vy = scale(my, 0, innerHeight, 15, 85)
    pupil.style.transform = `translate(${vx}%, ${vy}%)`
  });
}

// scales value from inMin - inMax range to outMin - outMax range
function scale(value, inMin, inMax, outMin, outMax) {
  const percent = (value - inMin) / (inMax - inMin);
  const out = percent * (outMax - outMin) + outMin;
  return out
}

.contact {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.box {
  display: flex;
  margin: 0;
  top: 35px;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  align-items: center;
  justify-content: center;
}

.box .eye {
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
  background-color: pink;
  border-radius: 50%;
  z-index: -1;
}

.box .eye .pupil {
  width: 100px;
  height: 100px;
  background-image: url(https://cdn-icons-png.flaticon.com/512/179/179531.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
}

<section class="contact">
  <div class="box">
    <div class="eye">
      <div class="pupil"></div>
    </div>
  </div>
</section>