Функция работает, но картинка еле крутится

Есть картинки, которые при наведении должны крутиться по осям x и y, функция вроде как рабочая, но картинки еле крутятся и сразу останавливаются, может быть я чего-то не замечаю?

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

export default function ServiceItem({ src, title, alt }) {
  const [state, setState] = useState({
    offsetX: "",
    offsetY: "",
    friction: 1 / 32,
  });

  const handeMouseMove = useCallback((e) => {
      console.log('mouse move')
    let followX = window.innerWidth / 2 - e.clientX;
    let followY = window.innerHeight / 2 - e.clientY;
    let x = 0,
      y = 0;
    x += (-followX - x) * state.friction;
    y += (followY - y) * state.friction;
    setState({
      offsetX: x,
      offsetY: y,
    });
  });

  let offset = {
    transform: `rotateY(${state.offsetX}deg)
                rotateX(${state.offsetY}deg)`,
  };

 
  return (
    <div className="col-4 service_item" style={offset} onMouseMove={handeMouseMove}>
      <div className="anim_pic">
        <img className="anim_img" src={src} alt={alt} />
      </div>
      <div className="service_text">{title}</div>
    </div>
  );
}