State not updating inside onComplete function

[Jen]

I'm building a component that has an input and I'm using timer so that after the duration completed it will automatically submit the input. But state where the input value is getting stored is not getting updated inside onComplete function..
Here's a sample: https://codesandbox.io/s/intelligent-mayer-6qrpw?file=/src/index.js

[Vasil Dimitrov]

Hey @jenvillaganas, the issue is caused by the fact that we call onComplete from the requestAnimationFrame so it will be fired with the initial state the function was in when the animation loop started.

One was to go around is to use ref, check an example here - https://codesandbox.io/s/nostalgic-vaughan-0znh6?file=/src/index.js

Otherwise I am working on the next major release of the component and this issue should be addressed there.