Emotion: ref is set to undefined when props.innerRef is undefined

[Pyrolistical]

• emotion version: 9.2.3
• preact version: 8.2.9

When I styled Router from reach router, it set ref=undefined.
Preact passed the ref along as a prop: https://github.com/developit/preact/issues/1143
And then reach router crashed: https://github.com/reach/router/issues/73

Repo case in preact: https://codesandbox.io/s/n3mpmk2054
Works fine in react: https://codesandbox.io/s/887o6v4p9j

The cause is on https://github.com/emotion-js/emotion/blob/master/packages/create-emotion-styled/src/index.js#L136
While this isn't emotion's bug per se, it can prevent this bug by only setting ref when when props.innerRef is present.

[Ailrun]

@Pyrolistical Thank you for reporting this!
As a quick fix, you can use shouldForwardProp to block ref.

[Pyrolistical]

@Ailrun that works! Thank you.

Workaround:

const Router = styled(UnstyledRouter, {
  shouldForwardProp: (key) => key !== 'ref'
})`
...
`

Reminder to do https://github.com/emotion-js/emotion/issues/655

[mitchellhamilton]

Closing since this issue since a PR was merged into preact fixing this.

[Ailrun]

@mitchellhamilton Could you link the PR?

[mitchellhamilton]

https://github.com/developit/preact/pull/1150

[Ailrun]

Great! Thx!