Estoy desarrollando una chat y quiero que los mensajes nuevos se visible para eso ocupo que el scroll vertical se desplaze automáticamente cuando se agrega el nuevo mensaje


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

      
      
       private scroll: React.RefObject<HTMLDivElement>;
      
      
      componentDidMount() {
        //window.scrollTo(0,0);
        //ReactDOM.findDOMNode(this).scrollIntoView();
        this.scroll.current.scrollIntoView({ block: 'end', behavior: 'smooth', inline: "nearest" });
      }
      
      render(){
      return(
       <div  ref={this.scroll} key={Keys}  className=" He  row">
                            <div className=" col">
                              <div className="Cuerpo">
                                <div className=" row">
                                  <label className="User">{items.usuario}</label>
                                </div>
                                <div className=" Mensaje row">
                                  <p className="pa">{items.mensaje}</p>
                                </div>
                                <div className="  row">
                                  <div className="col Fecha">{items.fecha}</div>
                                </div>
                              </div>
                            </div>
                          </div>
      )
      }

<!-- end snippet -->