Issue animating react components using framer motion on state change

Im having some issues getting an animation to work using framer motion. Any help would be greatly appriciated.

Code Sandbox Example

You went a bit too far trying to use custom properties here. Simple ternary conditional in animate did the trick.

Also, you had a bug in your increment decrement function, I fixed it too.

Check my solution here: https://codesandbox.io/s/framer-motion-issue-forked-6no3o?file=/src/App.js