컴포넌트에 ref 달기가 정확히 동작하지 않네요. 답변 부탁 드려요

강사님꼐서 쓰신"리액트를 다루는 기술" 이란 책도 사서 따라 해보고 있는데 잘 안되는 부분이 있어 글 올립니다. - 5.3 검포넌트에 ref 달기

[ ScrollBo.js ]

import React, { Component } from 'react';

class ScrollBox extends Component {

scrollToBottom = () => {

const { scrollHegiht, clientHeight } = this.box;

console.log("scrollHegiht : " + scrollHegiht);

console.log("clientHeight : " + clientHeight);

this.box.scrollTop = scrollHegiht - clientHeight;

}

render() {

const style = {

border : '1px solid black',

height : '300px',

width : '300px',

overflow : 'auto',

position : 'relative'

}

const innerStyle = {

width : '100%',

height : '650px',

background : 'linear-gradient(white, black)'

}

return (

<div

style={style}

ref={(ref) => {this.box=ref}}>

    );
}

export default ScrollBox;

[App.js]

import React, { Component } from 'react';

import ScrollBox from './ScrollBox';

class App extends Component {

render() {

return (

this.scrollBox=ref} />

this.scrollBox.scrollToBottom()}>

맨 밑으로

}

);

}

}

export default App;

위 2개의 js를 만들어서 실행하면 "맨밑으로" 버튼을 누르면 스크롤바가 내려가지 않습니다.

제가 어떤 부분을 코딩을 잘 못 한 건 가요?