gatsby-plugin-google-gtag: OutboundLink ForwardRef

[cbravo]

Summary

When using the OutboundLink component from gatsby-plugin-google-gtag I ran into an issue because the component does not forward its ref to the dom node inside.

Basic example

My exact use case was that I wanted to use a material-ui Link component and pass the OutboundLink as the actual component to be used like so:

import React from 'react';
import Link from '@material-ui/core/Link';
import { OutboundLink } from 'gatsby-plugin-google-gtag';

const ExternalLink = ({ to, ...props }) => (
  <Link
    component={OutboundLink}
    href={to}
    target="_blank"
    rel="noopener noreferrer"
    {...props}
  />
);

export default ExternalLink;

this throws an error because material-ui Links can only take components that can take refs and looking at the OutboundLink component shows that it cannot.

[cbravo]

I created a PR here #22705