[ListItem] ListItem is not forwarding refs

Describe the bug

The <ListItem /> component is not forwardings refs.

Expected Behavior

The <ListItem /> component is forwardings refs.

Steps to Reproduce

See the code: https://github.com/chakra-ui/chakra-ui/blob/develop/packages/layout/src/list.tsx#L97

The <ListItem /> is defined as:

export const ListItem = (props: PropsOf<typeof chakra.li>) => (
  <chakra.li {...props} />
)

Suggested solution(s)

export const ListItem = React.forwardRef(function ListItem(
  props: PropsOf<typeof chakra.li>,
  ref: React.Ref<any>,
) {
  return (
    <chakra.li ref={ref} {...props} />
  )
})

I think this would be it? But I might be missing something and there is a reason for this. For a workaround I used <Box as="li" />.

[segunadebayo]

I managed to fix it before seeing this issue. Thanks for catching that @mkaradeniz.

[ljosberinn]

naturally, I forgot it, but I’ll add it as soon as Sage is done with his forwardRef change.