I tried to morph 2 SVGs with Flubber on click with Framer motion, it worked, but not as expected.

The first click on the 'Hi" div triggered a change in the open state from 0 to 1, but it didn't animate the SVG. Another click event on the div did. But now the 'open' and 'progress' are not in sync.

Here's the codesandbox link to demonstrate my working code: =%2Fsrc%2FApp.tsx%3A12%2C24

How can I solve this?

Thanks in advance...