[React] ForwardRef

Question

W jaki sposób zastosować ForwardRef z destrukturyzowanymi propsami?

Przykład:

import React from 'react'
import PropTypes from 'prop-types';
import { variants, H1Strokes, H2Strokes } from './Headline.styled'

export const Headline = React.forwardRef((props, ref, {
  variant,
  children,
  color
}) => {
  const Tag = variants[`${variant || 'StrokeH1'}`]

  if (variant==='FillH1') {
    return (
      <Tag color={color}>
        {children}
        <H1Strokes.Top color={color} aria-hidden="true">{children}</H1Strokes.Top>
        <H1Strokes.Bottom color={color} aria-hidden="true">{children}</H1Strokes.Bottom>
      </Tag>
    )
  } else if (variant==='FillH2') {
    return (
      <Tag color={color}>
        {children}
        <H2Strokes.Top color={color} aria-hidden="true">{children}</H2Strokes.Top>
        <H2Strokes.Bottom color={color} aria-hidden="true">{children}</H2Strokes.Bottom>
      </Tag>
    )
  } else {
    return (
      <Tag>
        {children}
      </Tag>
    )
  }
})

Headline.propTypes = {
  variant: PropTypes.string
}

chciałbym zdestrukturyzować propsy: variant, children, color, które wykorzystuje przy wywołaniu komponentu. Jednocześnie chciałbym móc przekazywać ref do tego komponentu (stąd forwardRef)