I have a state called scrollStatus, where I track the current scroll position of a div, and I set its value using a ref and element.scrollLeft when scrolling:

const scrollHandle = () => {
setScrollStatus(container.current?.scrollLeft);
console.log(scrollStatus);
}

So when doing console.log I get a different value of scrollStatus, which is what I want:

When I resize the window by a large margin (let's say from desktop to mobile view), the scroll value will change drastically, which I expected for it to happen since my container's width is percentage based.

Here in the console, you can see the value changed to 375 after I resize the window to mobile view:

However, when I try to scroll again after resizing the window, the value of scrollStatus doesn't change. It retains the current position value after I resize the window:

(The value still won't change even if I resize the window again)

Any idea what's going on here and how to fix it?