反应ref.current.scrollIntoView不起作用

Question

我具有以下组件结构：

const AdverseEventsSection = (props) => {

    // generate refs based on the array
    const subsectionRefs = Object.values(myData).reduce((acc, event) => {
        acc[event.id] = React.useRef();
        return acc;
    }, {});

    // create a handleClick based on the arr key
    const setRankChangeFocus = ref => {
        ref.current.scrollIntoView({
            behavior: "smooth",
            block: "start"
        }) };

return (
 Object.values(myData).map((event) => {

                    return (
                        <SubsectionWrapper
                            key={event.id}
                            subsectionRef={subsectionRefs[event.id]}
                            onRankChange={(value) => {
                                setRankChangeFocus(value);
                            }}
                            />
}
    )

然后是SubsectionWrapper组件：

class SubsectionWrapper extends React.Component {

    onRankChange = () => {
        const { onRankChange, subsectionRef } = this.props;
        onRankChange(subsectionRef);
    };


    render() {
        const {key, subsectionRef} = this.props;

        return (
            <div ref={subsectionRef}>
            <SubSection
                key={key}
                onRankChange={() => this.onRankChange()}
           />
         </div>
)}

最后是Subsection组件，它在用户操作时触发onRankChange函数。

当onRankChange触发时，什么也没有发生。.窗口不会将相应的SubsectionWrapper滚动到视图中。为什么？