ReactJs + MaterialUI-ref scrollTop未定义

Question

在我的应用程序中，我使用MaterialUI Paper组件显示消息的可滚动列表。我想打印列表的scrollTop位置，但是不幸的是我没有得到定义。我在代笔库中找到了一种解决方案：https://codepen.io/JohnReynolds57/pen/NLNOyO?editors=0011 我的应用程序和Codepen之间的唯一区别是，我使用了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);

为什么不起作用？