How to forward refs?

Alright, so I have been trying to use and imported SVG with react-pose. React-pose has nothing to do with the problem. A simple example would be:

import ExpandSVG from './assets/expand.svg';

const ExpandIcon = React.forwardRef((props, ref) => (
  <ExpandSVG ref={ref} />
));

function Example() {
  const refExpandIcon = useRef(null);

  function handleClick() {
    console.log(refExpandIcon);
  }

  return (
    <div>
      <button
        type="button"
        onClick={handleClick}
      >
        Log ref of the Icon Below
      </button>
      <ExpandIcon ref={refExpandIcon} />
    </div>
  );
}

So when I click the button I would expect that the refExpandIcon would be anything but null. But instead I get a null;

Also I get the following error:

Removing the forwardRef does not make a difference.

Any ideas? I feel like it is a super simple fix

[tristanMatthias]

Can we please put this in 🙏? Happy to write a PR if needed

[Finesse]

I think it’s a good idea. I wrote it in my message:

The author of this library must forward the ref, not you.