Why does the React Spring animation executes 2 times?

Question

I am working on a small project and I am trying to implement shaking animation when the user clicks dont know. Right now, when I click the button it shakes two times. It does that when i add onRest function. When I remove it, it works great but I need to use that button multiple times so i need to update the state after the animation executes. How to solve this?

animation configuration:

  const { x } = useSpring({
    from: { x: 0 },
    to: { x: dontKnowClicked ? 1 : 0 },
    reset: true,
    onRest: () => {
      if (dontKnowClicked) {
        setDontKnowClicked(false);
      }
    },
    config: { mass: 1, tension: 500, friction: 10 },
  });

button controller:

  const handleDontKnow = () => {
    setDontKnowClicked(true);
  };

animated element tyle (it is input):

style={{
  transform: x
    .to({
      range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
      output: [0, 20, -20, 20, -20, 20, -20, 0],
    })
    .to((x) => `translate3d(${x}px, 0px, 0px)`),
}}