about forwardRef , I can’t understand the second use case

Case I, I can accept those code as the picture shows, we define the ref in parent component and pass it to child component

enter image description here

enter image description here

Case II,the component Input was defined as following ,

import * as React from 'react'

import { cn } from '@/lib/utils'

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = 'Input'

export { Input }

this was used in another file chat.js, the episoid as follwing

import { Input } from './ui/input'

<Input
        value={previewTokenInput}
        placeholder="OpenAI API key"
        onChange={e => setPreviewTokenInput(e.target.value)}
/>

something confused me , the parent didn’t define Ref variable, and use directly . Is this a new approach of using forwardRef ?

the codes are from https://github.com/vercel-labs/ai-chatbot,

  • /component/chat.tsx
  • /component/ui/input.tsx