Image bounces while rotating – Javascript

I have a project where a robot controls a go-kart.
The robot gives me X and Y coordinates and I displayed them in Chart.js accordingly.
Now I’m trying to display this visuality on a steering wheel so that wherever the go-kart moves, so does the steering wheel.
We also managed to calculate the angular distance of the points, but the steering wheel bounces back together.
For example, if you turn 90 degrees to the left immediately after going 90 degrees, the image will bounce.
Can anyone help me with this?

here is an example problem showing:
enter image description here

function rotate(deg) {
    document.querySelector('#steering_wheel').style.transform = 'rotate('+deg+'deg)';
}


let arrX = [];
let arrY = [];

tag5617.subscribe(function(message) {

    //let X = document.getElementById('posX');

    //X.innerHTML = message.x.toFixed(2);

    //let Y = document.getElementById('posY');

    //Y.innerHTML = message.y.toFixed(2);
   
    myChart.data.datasets[0].data.push({x:message.x.toFixed(2), y:message.y.toFixed(2)});

    arrX.push(message.x);

    arrY.push(message.y);

    let deg = Math.atan2(message.x - arrX[arrX.length-2], message.y - arrY[arrY.length-2]) * 180 / Math.PI;
    rotate(deg)

    myChart.update();

});