How to implement a scrollspy in react with 2 columns connected to each other

I have column #1 thats on the left side of the page that is housing my Names and i have a second column that is housing all of its descriptions under that name. The left co开发者_开发知识库lumn is not scrollable, but as you scroll down the middle column, i want the Name on the left side of the column to be highlighted once the majority of the descriptions of that particular name are visible in the second column.

I tried to use react-use-scrollspy but the problem im seeing is that the Name only changes in its highlighting once i scroll OUTSIDE of the middle column, and does not update the highlighting as i scroll WITHIN the second column. I feel like I am missing something regarding how React rerenders the page to see where the reference window location is