title: Framer-motion drag not respecting previously updated props
body: <p>A simple use-case is to allow a user to either click buttons to paginate in a slider, or drag. Both events call the same <code>paginate</code> function with a param to either go forward or back--simple stuff.</p>
  <p>However, the trigger from drag seems to cause bizarre behavior where the slider wants to start the animation from several slides back as if it ignores the updated props. This doesn't happen when using the buttons and both use the same simple <code>paginate</code> call.</p>
  <p>Any tips appreciated.</p>
  <p>Minimal example:</p>
  <pre><code>export default function App() {
    const [position, setPosition] = useState&lt;number&gt;(0);
  
    const paginate = (direction: Direction) =&gt; {
      setPosition((prev) =&gt; {
        return direction === Direction.Forward
          ? Math.max(-800, prev - 200)
          : Math.min(0, prev + 200);
      });
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Slider&gt;
          &lt;Wrapper
            animate={{ x: position }}
            transition={{
              x: { duration: 1, type: &quot;tween&quot; }
            }}
            drag=&quot;x&quot;
            dragConstraints={{
              top: 0,
              left: 0,
              right: 0,
              bottom: 0
            }}
            onDragEnd={(e, { offset, velocity }) =&gt; {
              const swipe = swipePower(offset.x, velocity.x);
  
              if (swipe &lt; -swipeConfidenceThreshold) {
                paginate(Direction.Forward);
              } else if (swipe &gt; swipeConfidenceThreshold) {
                paginate(Direction.Back);
              }
            }}
          &gt;
            &lt;Slide&gt;1&lt;/Slide&gt;
            &lt;Slide className=&quot;alt&quot;&gt;2&lt;/Slide&gt;
            &lt;Slide&gt;3&lt;/Slide&gt;
            &lt;Slide className=&quot;alt&quot;&gt;4&lt;/Slide&gt;
            &lt;Slide&gt;5&lt;/Slide&gt;
          &lt;/Wrapper&gt;
        &lt;/Slider&gt;
        &lt;button onClick={() =&gt; paginate(Direction.Back)}&gt;prev&lt;/button&gt;
        &lt;button onClick={() =&gt; paginate(Direction.Forward)}&gt;next&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><a href="https://codesandbox.io/s/eager-architecture-sovxj?file=/src/App.tsx" rel="noreferrer">Codesandbox Demo</a></p>