How to pass more than 1 ref to a child component in SolidJS?

Question

Parent Component:

function ParentComponent() {
 return (
    <section>
      <ChildComponent ref={sectionRef} ref1={headerRef} />
    </section>
  );
} 

Child Component:

function ChildComponent(props) {
return (
    <section ref={props.ref}>
      <article>
        <h2 ref={props.ref1}>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
          molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
          numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!</p>
      </article>
    </section>
  );
}

My goal is to be able to target different DOM elements in the child component from the parent component so that I can animate them based on a scroll event from the parent.

I have tried to pass the refs as different data structures:

<ChildComponent ref={{sectionRef, headerRef}} />

and:

<ChildComponent ref={[sectionRef, headerRef]} />

and:

<ChildComponent section={sectionRef} header={headerRef} />

But continuously get errors that the 2nd ref is undefined. I can only get it to work if I pass in a single ref per child component. Any ideas?

Links to reference material I looked at: https://www.solidjs.com/tutorial/bindings_forward_refs https://www.solidjs.com/docs/latest/api#ref