I am trying to replicate “Framer Motion animate on state update” example (which is done in React) in NextJS.

This is the link to my GitHub repository that I tried to replicate the example in NextJS: Framer Motion example replicate

And this is the deployment of my replication: Deployment

The .box div in the Example given in Framer Motion documentation move/ rotate while the range input value is changing in realtime.

However, in my Replication, the .box div responds slower than expected and only move/ rotate properly when I stop changing the range value or click to change the range value.

My Replication is 100% based on the Example given in Framer Motion documentation.

I would love to have an explanation on why this happens and any possible way to fix it. Thank you.