Как исправить анимацию rotate3D?

Всем привет! Делаю анимацию rotate3D, но картинки ведут себя странно. Должны они поворачиваться в сторону курсора при наведении на них, примерно так как здесь: https://codepen.io/Bilgili/pen/EbZepr

Но где-то у меня проблемы с рассчетом координат, поэтому крутятся они не так, как нужно: вроде они и двигаются, но все по-разному.

Буду благодарна за помощь, заранее спасибо.

Вот ссылка на код: https://codesandbox.io/s/brave-khorana-ntpki?file=/src/Components/ServiceItem.js

import React, { useEffect, useState } from "react";

export default function ServiceItem({ src, title, alt }) {
  const [offsetX, setOffsetX] = useState(0);
  const [offsetY, setOffsetY] = useState(0);
  //const [friction] = useState(1 / 25);
  const friction = 1 / 25;
  const [offsetClass, setOffsetClass] = useState({});

// ошибка точно на следующих нескольких строках

  const handleMouseMove = (e) => {
    let followX = window.innerWidth / 2 - e.clientX;
    let followY = window.innerHeight / 2 - e.clientY;

    let x = 0,
      y = 0;
    x += (-followX - x) * friction;
    y += (followY - y) * friction;

    setOffsetX(x);
    setOffsetY(y);
  };

  useEffect(() => {
    const offset = {
      transform: `rotate3d(${offsetX}, ${offsetY}, 0, ${
        Math.max(offsetX, offsetY) * 3.14
      }deg)`
    };

    setOffsetClass(offset);
  }, [offsetX, offsetY]);

  return (
    <div className="services_item">
      <div
        className="services_pic"
        onMouseMove={handleMouseMove}
        onMouseLeave={() => setOffsetClass({})}
      >
        <img
          className="services_image"
          src={src}
          alt={alt}
          style={offsetClass}
        />
      </div>
      <div className="services_title">{title}</div>
    </div>
  );
}