Failed prop type: Invalid prop `innerRef` of type `function` supplied to `TextareaAutosizeClass`, expected `object`

[tommedema]

With version:

"react-autosize-textarea": "^7.0.0",

I'm trying to replace my textarea with TextareaAutosize, which should work without changes as per the documentation:

Before:

type IBodyInputProps = IInputProps & StyledComponentPropsWithRef<"textarea">

const BodyInput = styled<React.FC<IBodyInputProps>>(
  forwardRef(
    (
      {
        validationError,
        ...rest
      },
      ref: React.Ref<HTMLTextAreaElement>
    ) => (
      <textarea ref={ref} {...rest} />
    )
  )
)`
grid-column: 1 / 2;
grid-row: 1 / 2;
`

This works fine. After:

type IBodyInputProps = IInputProps & StyledComponentPropsWithRef<"textarea">

const BodyInput = styled<React.FC<IBodyInputProps>>(
  forwardRef(
    (
      {
        validationError,
        ...rest
      },
      ref: React.Ref<HTMLTextAreaElement>
    ) => (
      <TextareaAutosize ref={ref} {...rest} />
    )
  )
)`
grid-column: 1 / 2;
grid-row: 1 / 2;
`

Gives me this error:

index.js:1375 Warning: Failed prop type: Invalid prop `innerRef` of type `function` supplied to `TextareaAutosizeClass`, expected `object`.
    in TextareaAutosizeClass (created by ForwardRef)
    in ForwardRef (at EditableBubbleComment.tsx:448)
    in ForwardRef (created by Context.Consumer)
    in StyledComponent (created by Styled(Component))
    in Styled(Component) (at EditableBubbleComment.tsx:211)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div (at EditableBubbleComment.tsx:210)
    in form (created by Context.Consumer)
    in StyledComponent (created by styled.form)
    in styled.form (at EditableBubbleComment.tsx:204)
    in EditableBubbleComment (at ConversationThread.tsx:354)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div (at ConversationThread.tsx:310)
    in div (at ConversationThread.tsx:456)
    in ForwardRef (created by Context.Consumer)
    in StyledComponent (created by Styled(Component))
    in Styled(Component) (at ConversationThread.tsx:293)
    in ForwardRef
    in ForwardRef (at Sidepanel.tsx:118)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div (at Sidepanel.tsx:87)
    in Sidepanel (created by Context.Consumer)
    in StyledComponent (created by Styled(Component))
    in Styled(Component) (at Editor.tsx:246)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div (at Editor.tsx:213)
    in EditorView (at App.tsx:48)
    in App (at src/index.tsx:37)
    in Provider (at src/index.tsx:35)
    in ErrorBoundary (at src/index.tsx:34)

[tommedema]

I awarded a $20 bounty on this issue

[AnttiVirtanen]

Had this problem as well, instead of using ref i switched it to inputRef and it started working.
From <TextareaAutosize ref={ref} {...rest} />
to <TextareaAutosize inputRef={ref} {...rest} />

[tommedema]

@AnttiVirtanen I can't do this because this is not a typescript property