Rotar una imagen en movimiento con jquery

Tengo algunos problemas para que la imagen gire correctamente después de que sigue al cursor. Creo que gira según su ubicación original, pero no estoy seguro.

¿Alguna posibilidad de hacer que gire 360 ​​grados sin importar su ubicación final?

código original:

<!DOCTYPE html>
<html>
<head>
<style>
.box{
    background-color: black;
    width: 30px;
    height: 30px;
    
    position: absolute;
    left: 200px;
    top: 200px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>

<div class="box" id="image">  </div>



<script>

$(document).mousemove(function(e){
/*duration determines the speed of the animation (in this case, the speed to which prgm follows)*/
    $("#image").stop().animate({left:e.pageX, top:e.pageY}, {duration: 5000});
});


</script>


<script>
let box = document.querySelector(".box");
let boxBoundingRect = box.getBoundingClientRect();
let boxCenter= {
    x: boxBoundingRect.left + boxBoundingRect.width/2, 
  y: boxBoundingRect.top + boxBoundingRect.height/2
};

document.addEventListener("mousemove", e => {
    let angle = Math.atan2(e.pageX - boxCenter.x, - (e.pageY - boxCenter.y) )*(180 / Math.PI);      
    box.style.transform = `rotate(${angle}deg)`;  
})
</script>

</body>
</html>
Answer