I have several components which might differ from page to page in my React/NextJS application. They are dynamically mapped, and now I need to see which one is in the viewport when scrolling.

I could when mapping the components put a div in between all of them, and put useRefs on all the divs, but I was thinking this seems like the ugliest method.

Do you have any other suggestions?

Thank you for your time