[Bug]: Error when render <Menu.Button> as a custom component

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.4.1

What browser are you using?

Chrome

Reproduction repository

https://codesandbox.io/s/wonderful-leaf-t4899?file=/src/App.js

Describe your issue

When trying to use <Menu.Button /> with a custom component it doesn’t work as expected and I get the following warning: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Simplified example:

const CustomButton = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

<Menu.Button as={CustomButton}>More</Menu.Button>

Does headless-ui require the <CustomButton/>-component to forward unknown props down to the html <button> element am I using it wrong?

[RobinMalfait]

When you are adding custom components, make sure to passthrough all the props you get from Headless UI. These include event handlers, but also aria related attributes.

E.g.:

// This is incorrect
const CustomButton = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

<Menu.Button as={CustomButton}>More</Menu.Button>

// This is correct
const CustomButton = React.forwardRef((props, ref) => (
  <button ref={ref} {...props} />
));

<Menu.Button as={CustomButton}>More</Menu.Button>

[adamlindqvist]

When you are adding custom components, make sure to passthrough all the props you get from Headless UI. These include event handlers, but also aria related attributes.

E.g.:

// This is incorrect
const CustomButton = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

<Menu.Button as={CustomButton}>More</Menu.Button>

// This is correct
const CustomButton = React.forwardRef((props, ref) => (
  <button ref={ref} {...props} />
));

<Menu.Button as={CustomButton}>More</Menu.Button>

It might be worth mentioning this in the documentation?