When we want specific styles on a row in drop content, we monitor it using useState. When we update the background color for a row based on hover, the component re-renders (as bg color changes) & the scroll position gets reset.

Attached a recording where I reproduced the issue.

We could apply styles via pseudo class :hover but as per our UX requirement we have complex states to maintain which can only be handled using useState & its related hooks.
eg.,
const chooseBackground = () => { if (item.selected && !newOptionSelected && !item.disabled) { return internalColors.lightSlate; } if (selected === index && hover) { return internalColors.solitude; } if (activeIndex === index || (item.active && activeIndex === -1)) { return internalColors.lightSlate; } return 'none'; };