свойство прокрутки вверх не меняется

Question

Я рендеринг набора изображений, которые хранятся внутри компонента прокрутки.У меня есть кнопки для перехода к следующему или предыдущему изображению, которые изменяют свойство scrollTop.Но свойство scrollTop не меняется, когда я смотрю консоль.

Я записал в консоль значения до и после изменения свойства scrollTop, они меняются, но значение не изменяется в консоли

handleNext= () => {

const scrollBar = document.querySelector('#pdf-scroll');
console.log(scrollBar.scrollTop)
const page = Math.floor(scrollBar.scrollTop/this.state.pageHeight)+1
const scroll = page*this.state.pageHeight - scrollBar.scrollTop
console.log(scroll)
scrollBar.scrollTop += scroll;
console.log(scrollBar.scrollTop)

}

Эта функция вызывается при нажатии следующей кнопки

const Scroll = ({высота, ширина, дети})=> {return (

    <div id='pdf-scroll' style = {{ overflowY: 'scroll',
                height: height,
                width: width
             }}>
             { children }
    </div>

);

}

Это компонент прокрутки

Я ожидаю, что значение верхнего края прокрутки изменится, но не будет, когда я его просматриваю ввкладка Свойства консоли Chrome. Если вам нужна дополнительная информация, пожалуйста, оставьте комментарий