What is the usage of material-ui useScrollTrigger with child target ref?

I am trying to use material-ui's useScrollTrigger with a target other than window like so:

export default props => {
    let contentRef = React.createRef();

    const scrollTrigger = useScrollTrigger({ target: contentRef.current });

    return (
        <React.Fragment>
            <CustomHeader shrink={scrollTrigger} />

            <div ref={contentRef}>
                {props.children}
            </div>
        </React.Fragment>
    );
};

This causes an error to be thrown because contentRef.current is null when useScrollTrigger is called. What is the proper usage of this utility with child elements as a target?

from What is the usage of material-ui useScrollTrigger with child target ref?