How to cross register state across sibling components with a shared parent component?

I have two React components A and B which contain each an AgGridReact, actually is one A component and B1, B2, B3 etc. components but ok we can assume is only A and B as only one B will be active at the time.

I would like to replicate the simple example here for aligning two AgGridReact:
https://www.ag-grid.com/react-data-grid/aligned-grids/#example-aligned-column-groups

the issue is that each AgGridReact needs a ref to itself and to the aligned component alignedGrids something like:

Component A

import React, {useRef} from 'react';

const A = props => {
  aGridRef = useRef(null);
   
  return (
    <div className="container">
      <div className="grid ag-theme-alpine">
        <AgGridReact
           ref={aGridRef}
           alignedGrids={props.bGridRef.current ? [props.bGridRef.current] : undefined}
        />
      </div>        
    </div>
   )
};

export default A;

Component B

import React, {useRef} from 'react';

const B = props => {
  bGridRef = useRef(null);

  return (
    <div className="container">
      <div className="grid ag-theme-alpine">
        <AgGridReact
           ref={bGridRef}
           alignedGrids={props.aGridRef.current ? [props.aGridRef.current] : undefined}
        />
      </div>        
    </div>
   )
};

export default B;

Now assume I have the parent Component X

import React, {useRef} from 'react';

const X = props => {
   return (
      <div>
        <A />
        <B />
      </div>
   )
};

export default X;

What should X do to correctly cross register the references in all components?

import React, {useRef} from 'react';

const X = props => {
   const aTable = useRef(null)
   const bTable= useRef(null)
   return (
      <div>
        <A ref={aTable} alignWith={bTable} />
        <B ref={bTable} alignWith={aTable} />
      </div>
   )
};

export default X;

import React, { forwardRef } from 'react';

const A = forwardRef((props, ref) => {
  return (
    <div className="container">
      <div className="grid ag-theme-alpine">
        <AgGridReact
           ref={ref}
           alignedGrids={props.alignWith.current ? [props.alignWith.current] : undefined}
        />
      </div>        
    </div>
   )
});

export default A;

import React, { forwardRef } from 'react';

const B = forwardRef((props, ref) => {
  return (
    <div className="container">
      <div className="grid ag-theme-alpine">
        <AgGridReact
           ref={ref}
           alignedGrids={props.alignWith.current ? [props.alignWith.current] : undefined}
        />
      </div>        
    </div>
   )
});

export default B;