picking `ref` from component's props is not allowed

Description

Picking ref from component’s props produces an error. Picking it is necessary to assign proper type to innerRef.

Error:

Warning: [object Object]: `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)

Reproduction

My code is similar to example code from Readme.md section on how to pass ref:

export const Box = React.forwardRef(
  <E extends React.ElementType = typeof defaultElement>(
    { ref, ...restProps }: BoxProps<E>,
    innerRef: typeof ref
  ) => {
    return <StyledBox ref={innerRef} as={defaultElement} {...restProps} />;
  }
) as <E extends React.ElementType = typeof defaultElement>(
  props: BoxProps<E>
) => JSX.Element;

Expected behavior

innerRef should be somehow typed without picking ref from component’s props

Environment

I am using Next.js 9.4.4 and React 16.13.1

[kripod]

I’m sorry, CodeSandbox didn’t show the error for me. It turns out that the ref prop shall not be destructured, but kept inside ...restProps, as follows:

import { Box } from "react-polymorphic-box";

export const Heading = React.forwardRef(
  <E extends React.ElementType = typeof defaultElement>(
+    { color, style, ...restProps }: HeadingProps<E>,
+    innerRef: typeof restProps.ref
-    { ref, color, style, ...restProps }: HeadingProps<E>,
-    innerRef: typeof ref
  ) => {
    return (
      <Box
-       ref={innerRef}
        as={defaultElement}
        style={{ color, ...style }}
        {...restProps}
+       ref={innerRef}
      />
    );
  }
) as <E extends React.ElementType = typeof defaultElement>(
  props: HeadingProps<E>
) => JSX.Element;

I’ve updated the readme and my playground to reflect these changes. Also, I’ve fixed the example of @rajatsharma again.

[rajatsharma]

Here’s the CodeSandbox for my example: https://codesandbox.io/s/cocky-lehmann-2iy2t?file=/src/Box.tsx