title: What is the usage of material-ui useScrollTrigger with child target ref?
body: <p>I am trying to use <a href="https://material-ui.com/components/app-bar/#usescrolltrigger-options-trigger" rel="noreferrer">material-ui's useScrollTrigger</a> with a target other than <code>window</code> like so:</p>
  
  <pre><code>export default props =&gt; {
      let contentRef = React.createRef();
  
      const scrollTrigger = useScrollTrigger({ target: contentRef.current });
  
      return (
          &lt;React.Fragment&gt;
              &lt;CustomHeader shrink={scrollTrigger} /&gt;
  
              &lt;div ref={contentRef}&gt;
                  {props.children}
              &lt;/div&gt;
          &lt;/React.Fragment&gt;
      );
  };
  </code></pre>
  
  <p>This causes an error to be thrown because <code>contentRef.current</code> is null when <code>useScrollTrigger</code> is called. What is the proper usage of this utility with child elements as a target?</p>