При прокрутке вниз, использование getBoundingClientRect () для элемента внутри componentDidMount возвращает ограничивающий прямоугольник с неправильной позицией

Question

Прокрутка длинной страницы и использование getBoundingClientRect () дает неправильную позицию для этого элемента. Страница принимает document.body.scrollTop === 0 и дает мне ограничивающий прямоугольник в соответствии с этим, когда в действительности document.body.scrollTop != 0, когда я обновляю страницу и прокручиваю вниз.

Пример кода:

class App extends React.Component {  
  componentDidMount() {
    let boxes = Array.from(document.getElementsByClassName('box'))

    const checkBoxBounds = () => {
      boxes.forEach((box) => {
        let boundingRect = box.getBoundingClientRect()  
      })
    }

    checkBoxBounds()
  }

  render() {
    return (
      <div>

        <div style={"height": "10000px"}>Really tall content</div>

        <div className="box">I am box 1</div>
        <div className="box">I am box 2</div>

      </div>
    )
  }
}

Как я могу получить правильный ограничивающий прямоугольник, когда прокручиваю страницу вниз и обновляюсь?