React: Получить высоту блока, содержащего динамически генерированные компоненты

Есть набор компонентов, которые динамически генерируются при нажатии на button. В примере ниже, это однотипный компонент. В реальном проекте это разные компоненты, для отрисовки которых требуется определенное время, например, google карты.

Этот набор компонентов рендерится в левом блоке. В правом блоке (sidebar) мне необходимо получить суммарную высоту левого блока после окончательной отрисовки каждого из компонентов.

В примере, я создал ссылку на DOM узел левого блока и передал его в компонент sidebar. Однако, вижу, что высота левого блока отображается не корректно. Она как бы запаздывает что ли. Т.е. показывает высоту предыдущего рендеринга. А мне необходимо текущее состояние.

Каким образом я могу это сделать?

https://codesandbox.io/s/xenodochial-https-r52x7?

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 2
    };

      this.leftRef = React.createRef();
  }

  genRandom = () => {
    let randomNumber = Math.floor(Math.random() * 10) + 1
    this.setState({ count: randomNumber})
  }

  render() {

    let components = [];

    for (let i = 0; i < this.state.count; i++) {
      let component = (<div className="children" key={i}>children height = 30px</div>)
        components.push(component);
    }
    
return (
      <div className="App">
        <div>
        <button type="button" onClick={this.genRandom}>generate random childrens</button>
        </div>
        <div className="left" ref={this.leftRef}>
          {components}
        </div>
        <Sidebar leftRef={this.leftRef}/>
      </div>
    );
  }
}

function Sidebar(props) {
  let height = 0;
  if(props.leftRef.current){
    console.log(props.leftRef.current.getBoundingClientRect());
    height = props.leftRef.current.getBoundingClientRect().height;
  }
  return <div className="sidebar">Sidebar height = {height} px</div>
}