Force Feeding not working in Velocity JS

Question

I am trying to use VelocityJS in one of my React projects. The use case where I am facing the problem is:

There is pointer created in SVG, initially at the center of the screen. I want to move the pointer with the keyboard arrow keys. I have maintained a state variable for updating the X and Y values of the pointer on keydown event. On the callback of setState, I am calling a translate function which animates the translation. But the problem I faced is that The animation always happened from the initial position of the pointer i.e. center of the screen. So as a workaround I tried was that I maintained the previous position of the pointer in state too, using forcefeeding in velocityJS. Someone go through my code and see if I am doing something wrong.

$(".Aim").velocity(
  {
    translateX: [this.state.aimX, this.state.aimXOld],
    translateY: [this.state.aimY, this.state.aimYOld]
  },
  {
    duration: 500,
    easing: [0.46, 0.46, 0.46, 0.46],
    complete: () => {
      console.log("completed");
    }
  }
);