'prop' is missing in props validation?

Question

I'm new to react's forwardRef, and I need help. I'm getting errors on the props in FadeContents , which states that eg 'direction' is missing in props validation. Is there a solution to this? I feel like I have to define the props somewhere in order to use them in the div-element, and I can't seem to understand where? TIA!

// @flow

import React, { forwardRef } from "react"
import type { Node } from "react"

type Props = {
  direction: 'left' | 'right',
  animatingOut: boolean,
  children: Node,
}

const FadeContents = forwardRef<Props, HTMLDivElement>(
  ({ direction, animatingOut, children }, ref) => (       // <-- error here
    <div
      aria-hidden={animatingOut}
      animatingOut={animatingOut}
      direction={direction}
      ref={ref}
    >
      {children}
    </div>
  )
)

FadeContents.displayName = 'FadeContents'

export default FadeContents

Answer 1

This is an error from eslint I imagine? But does this help?

({ direction, animatingOut, children }: Props, ref) => ( // <-- error here