Compass Arrow Rotate to Follow Cursor With Javasript

I’m trying to create this interactive compass so that the arrow always points to the mouse cursor and on mobile where you place your finger.

I’m new to coding so I asked Google Bard to generate some code for me but it’s not working correctly. I brought the HTML, CSS, and Javascript in to VS Code and it kind of works but it’s not there. I think the code is calculating the arrow rotation based on the center of the image and not the top so it just spins wierd and never points at my mouse. Thank you in advance for anyone taking a look at this post!

GOOGLE BARD CODE:

<div id="arrow">
  <img src="arrow.png">
</div>

#arrow {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(0deg);
}

document.addEventListener("mousemove", function(event) {
  // Get the mouse cursor position.
  var mouseX = event.clientX;
  var mouseY = event.clientY;

  // Calculate the angle between the center of the arrow and the mouse cursor.
  var angle = Math.atan2(mouseY - 25, mouseX - 25) * 180 / Math.PI;

  // Rotate the arrow to the calculated angle.
  var arrow = document.getElementById("arrow");
  arrow.style.transform = "rotate(" + angle + "deg)";
});