title: pass multiple refs to child components
body: <p>Before diving to the main problem, my use case is I am trying to handle the scroll to a desired section. I will have navigations on the left and list of form sections relative to those navigation on the right. The <code>Navigation</code> and <code>Form Section</code> are the child component. Here is how I have structured my code</p>
  
  <p><code>Parent.js</code></p>
  
  <pre><code>const scrollToRef = ref =&gt; window.scrollTo(0, ref.current.offsetTop);
  
  const Profile = () =&gt; {
    const socialRef = React.useRef(null);
    const smsRef = React.useRef(null);
    const handleScroll = ref =&gt; {
      console.log("scrollRef", ref);
      scrollToRef(ref);
    };
    return (
      &lt;&gt;
        &lt;Wrapper&gt;
          &lt;Grid&gt;
            &lt;Row&gt;
              &lt;Col xs={12} md={3} sm={12}&gt;
                &lt;Navigation
                  socialRef={socialRef}
                  smsRef={smsRef}
                  handleScroll={handleScroll}
                /&gt;
              &lt;/Col&gt;
              &lt;Col xs={12} md={9} sm={12}&gt;
                &lt;Form
                  socialRef={socialRef}
                  smsRef={smsRef}
                /&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Grid&gt;
        &lt;/Wrapper&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p><code>Navigation.js(child component)</code>
  I tried using forwardRef but seems like it only accepts one argument as ref though I have multiple refs.</p>
  
  <pre><code>const Navigation = React.forwardRef(({ handleScroll }, ref) =&gt; {
    // it only accepts on ref argument
    const items = [
      { id: 1, name: "Social connections", pointer: "social-connections", to: ref }, // socialRef
      { id: 2, name: "SMS preference", pointer: "sms", to: ref }, // smsRef
    ];
    return (
      &lt;&gt;
        &lt;Box&gt;
          &lt;UL&gt;
            {items.map(item =&gt; {
              return (
                &lt;LI
                  key={item.id}
                  active={item.active}
                  onClick={() =&gt; handleScroll(item.to)}
                &gt;
                  {item.name}
                &lt;/LI&gt;
              );
            })}
          &lt;/UL&gt;
        &lt;/Box&gt;
      &lt;/&gt;
    );
  });
  
  export default Navigation;
  </code></pre>
  
  <p><code>Form.js</code>
  I do not have idea on passing multiple refs when using forwardRef so for form section I have passed the refs as simple props passing. </p>
  
  <pre><code>const Form = ({ socialRef, smsRef }) =&gt; {
    return (
      &lt;&gt;
        &lt;Formik initialValues={initialValues()}&gt;
          {({ handleSubmit }) =&gt; {
            return (
              &lt;form onSubmit={handleSubmit}&gt;
                &lt;Social socialRef={socialRef} /&gt;
                &lt;SMS smsRef={smsRef} /&gt;
              &lt;/form&gt;
            );
          }}
        &lt;/Formik&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p>Social.js</p>
  
  <pre><code>const Social = ({ socialRef }) =&gt; {
    return (
      &lt;&gt;
        &lt;Row ref={socialRef}&gt;
          &lt;Col xs={12} md={3}&gt;
            &lt;Label&gt;Social connections&lt;/Label&gt;
          &lt;/Col&gt;
          &lt;Col xs={12} md={6}&gt;&lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p>Can anyone help me at passing multiple refs so when clicked on the particular navigation item, it should scroll me to its respective component(section).</p>