ReactJs + MaterialUI - ссылка scrollTop не определена

Question

В моем приложении я показываю прокручиваемый список сообщений, используя компонент MaterialUI Paper. Я хотел напечатать позицию scrollTop в моем списке, и, к сожалению, в результате я получил неопределенное значение. Я нашел решение в коде ручки: https://codepen.io/JohnReynolds57/pen/NLNOyO?editors=0011 Единственное различие между моим приложением и кодом - это то, что я использую MaterialUI

Вот мой стиль пользовательского интерфейса материала

const messagesStyles = {
    root: {
        margin: 0,
        padding: "1em",
        display: "flex",
        flexDirection: "column-reverse",
        justifyContent: "flex-end",
        maxHeight: "60vh",
        overflow: "scroll",
    },
    messages: {
        display: "flex",
        flexDirection: "column-reverse",
        flexGrow: 1,
        minHeight: 0,
    }
};

Мой компонент MessagesList

class MessagesList extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
        this.state = {scrollTop: 0};
    }

    onScroll = () => {
        const scrollY = window.scrollY;
        const scrollTop = this.myRef.current.scrollTop;
        console.log(`onScroll, window.scrollY: ${scrollY} myRef.scrollTop: ${scrollTop}`);
        this.setState({
            scrollTop: scrollTop
        });
    }

    render() {
        ...
        return (
            <Paper className={classes.root} elevation={1} ref={this.myRef} onScroll={this.onScroll} >
                <div className={classes.messages}>
                    {
                        items
                    }
                </div>
            </Paper>
        );
    }
}

export default withStyles(messagesStyles)(MessagesList);

Почему он не работает?