I am learning how to use forward refs here I have a FC where I need to initalize all my refs and then pass them down to it's children so I can get the canvas instances of some chartjs charts. However using forwardRef I get a type error saying ref is not a property of the child.

const BUIDashboard: React.FC = () => {

    const chartRef = React.createRef<RefObject<HorizontalBar>>()

.

.

.

    return (



      <Child 

          ref={chartRef} <------------------- TYPE ERROR HERE

          isLoading={isLoadingChild}

          data={childData} />

     )

}

There are no errors in the child but it's set up like this

type Props = {

  rootProps?: DashboardCardProps

  isLoading?: boolean

  data?: BUIMetrics['breachBreakdownByOutcome']

}



const Child: React.FC<Props> = React.forwardRef(({ rootProps, isLoading, data }, ref: RefObject<HorizontalBar>) => {



    return (

      <HorizontalBar ref={ref}/>

    )

}

Have I defined the params for the child incorrectly?

I thought the issue might be this line

const Child: React.FC<Props>

so I updated the Props type to

type Props = {

  rootProps?: DashboardCardProps

  isLoading?: boolean

  data?: BUIMetrics['breachBreakdownByOutcome']

} & { ref: RefObject<HorizontalBar> }

However then the Child component declaration throws this error:

TS2322: Type 'ForwardRefExoticComponent<Pick<Props, "rootProps" | "isLoading" | "data"> & RefAttributes<HorizontalBar>>' is not assignable to type 'FC<Props>'.

  Types of property 'defaultProps' are incompatible.

    Type 'Partial<Pick<Props, "rootProps" | "isLoading" | "data"> & RefAttributes<HorizontalBar>> | undefined' is not assignable to type 'Partial<Props> | undefined'.

      Type 'Partial<Pick<Props, "rootProps" | "isLoading" | "data"> & RefAttributes<HorizontalBar>>' is not assignable to type 'Partial<Props>'.

        Types of property 'ref' are incompatible.

          Type '((instance: HorizontalBar | null) => void) | RefObject<HorizontalBar> | null | undefined' is not assignable to type 'RefObject<HorizontalBar> | undefined'.

            Type 'null' is not assignable to type 'RefObject<HorizontalBar> | undefined'.

Also this is blatant advertising but I am trying to figure this out to resolve another issue linked below. If you have any insight on this problem please let me know as well. Thank You.
Using react-pdf with react-chartjs-2 to generate a pdf