Passing the output of a React component as props

React newbie here.

I am trying to pass component ref (component A) into another component (component B) so that I can get the inner HTML of the component.

I have tried the code below, but the ref just appears to be empty (I think this is because it hasn't actually rendered yet).

Am I doing this correctly?

Component A:

export default function SendOrPrintInvoice(props) {
  var layoutRef = useRef();
  var emails = ["test@test.com"];
  return(
    <Layout ref={layoutRef}/>
    <SendEmailModal list={emails} layoutRef={layoutRef}/>
  );
}

Component B:

export default function EmailInvoiceModal(props) {
  console.log("Got email addresses: "+JSON.stringify(props.list);
  console.log("Got layoutRef: "+JSON.stringify(layoutRef);
}