Progress Bar resetting when sibling stage touched

[cyphunk]

I have a progressbar in a render along side other elements with their own state. It appears that when I progmatically update the state of the other sibling elements that the progressbar rereads it's own state. And it appears when it does this it resets the progress bar and it starts counting again from 1. Is there a good strategy for allowing the ProgressBar to retain its state despite the render() being recalled for sibling state? do I have to make the ProgressBar the absolute parent react instance?

[cyphunk]

Here is an example of the problem. Every 3 seconds another state value is incremented causing the progress bar to reset

https://codepen.io/anon/pen/dOLPZv

Version where Progress Bar is in a child object with its own state. Still same issue:

https://codepen.io/anon/pen/ENJaRK

Version where Progress Bar is absolute root with changing content as child object. Works

https://codepen.io/anon/pen/WoWbgm

That said, the idea that the progress bar requires being absolute root is a bit... well. Any chance fixing it so that doesnt happen isn't so dificult?

[cyphunk]

In the end I used https://kimmobrunfeldt.github.io/progressbar.js/. In the reactjs render just initialize the container

and then on other code (no matter where in object tree) just initialize a new bar when you need to or animate it when you want.