Dropdown as Gatsby Link not working

[jpeterson]

Bug Report

Steps

Use this project with GatsbyJS, augmenting Dropdown as Gatsby's Link. It is possible this is an issue with Gatsby Link, not this project.

import { Link } from 'gatsby'
import { Dropdown } from 'semantic-ui-react'
...

<Dropdown as={Link} to="/products" text="Products">
...
</Dropdown>

Expected Result

Dropdown should render as a Link without any warnings or errors.

Actual Result

Produces the following warning and doesn't navigate to routes without a page reload.

Warning:

Warning: GatsbyLink: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

Version

0.82.5

Testcase

NOTE: I was unable to reproduce this using @reach/router (which Gatsby's Link is wrapping). Both codesandboxes are below.

Not working with gatsby (see console on page load):
https://codesandbox.io/s/818n63rm8j

Working as expected with @reach/router:
https://codesandbox.io/s/2wzyo0qvw0

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

I'm not sure that it's real valid usage at all, it also breaks styling.

In the future releases we will forward ref by default, #2844. However, workaround can be done with forwardRef API:

const ForwardedLink = React.forwardRef((props, ref) => (
  <Link {...props} innerRef={ref} />
));

Working Codesandbox: https://codesandbox.io/s/30oypqv2zp

[jpeterson]

Thanks for the workaround @layershifter! I think styling works as expected as long as you have the item and simple props on the Dropdown.

Working Codesandbox (with style): https://codesandbox.io/s/818n63rm8j