InPlace Character animation plays abruptly when the character is moved in React Three Fiber

Question

I have an inplace walk animation for a character, the animation plays well in blender (see below gif) but when the character is moved using code in React-Three-Fiber it moves abruptly as you can see in the below gif. I am not sure where the issue is.

Character Moving Abruptly in React-Three-Fiber

Character Moving smoothly in Blender

Character Graph editor view

Code used to move the character

const dinoNode = gltf.nodes.Armature;
  let mixer = new THREE.AnimationMixer(gltf.scene);
  let walkingAnimation = mixer.clipAction(
    gltf.animations.find((clip) => clip.name === "DinoWalking")
  );

  const targetPosition = new THREE.Vector3(
    dinoNode.position.x,
    dinoNode.position.y,
    dinoNode.position.z - 1
  );
  const MOVEMENT_SPEED = 0.02;
  useFrame((state, delta) => {
    mixer.update(delta);
    if (props.playAnimation == "Walk") {
      dinoNode.position.lerp(targetPosition, MOVEMENT_SPEED);
      if (dinoNode.position.distanceTo(targetPosition) < 0.1) {
        walkingAnimation.stop();
        props.setPlayAnimation("");
      } else {
        walkingAnimation.play();
      }
    }
  });