Calling onChange in one element when another element goes out of view

[joanacdias]

There are some periods where more than one element is visible at the same time as you can partially see the first element whilst scrolling to the following element. When scrolling back up, the second element will not be visible any more as it scrolls away from the viewport, yet the first element will still be visible and the state is still true without calling the onChange function again.

I need to be able to call the onChange function again when this happens, so that when the second element goes out of view, I can update the state to then set the index of the first element into the component state again - the visible element index state will still be set to 1 here rather than 0 as the isVisible boolean of the first element hasn't changed.

Any idea on how to achieve this?