Inadequate display of incoming data in the component?

Question

JavaScript

I am writing a color picker. There is a root component and several child components. The root component accepts input data on which it initializes the data with colors and passes it to the child components. When a child component is updated, some data goes back to the parent and is updated in it, and the rest of the child components are updated accordingly.
Child components calculate their data based on incoming ones - for example, a track with opacity receives alpha channel data from 0 to 1 and sets the coordinates of the round cursor in the calculated properties, the rest of the components work according to this principle.
So, when I select colors in different components, for example, I select a color in a large picker (saturation / value) and then in a transparency picker (alpha), then the cursor in the large picker may move a little. This bug occurs not only in a particular case, but cursors bounce in other places, for example, 2 cursors can bounce at once - for example, I first select a color in the large picker and in the HUE picker and then change the opacity, then immediately 2 cursors, which I before that moved, they can move, I am attaching
a video to make it more clear and visual https://yadi.sk/i/YkTJ1M5ROqR0IQ
Sandbox with a picker https://codesandbox.io/s/3rky6xl7rq
I suspect that this is a problem in updating data and child components either do not have time to update them normally or something like that, although I myself could not solve the problem.
With calculations of the position of the cursors, everything is ok, because the cursors do not always jump.