javascript - 関数コンポーネントの forwardRef に反応する

Question

私はこのインターフェースを持っています:

export interface INTERFACE1{
  name?: string;
  label?: string;
}

そして、この関数コンポーネント:

export function FUNCTION1({
  name,
  label
}: INTERFACE1) {
  return (
    <CustomComponent name={name} label={label} />
  );
}

私の目標はCustomComponent、別のコンポーネントからこれにアクセスすることです。インターフェイス内に追加しようとしましref: React.createRef<any>たが、クリックしませんでした。私の調査によると、使用する必要があるようforwardRefですが、オンラインの例のほとんどは機能していないようです。CustomComponentこのように、別のコンポーネントから外部から参照するにはどうすればよいですか?

import React, { useCallback, useEffect, useState, createRef } from 'react';
import { FUNCTION1 } from 'FUNCTION1';

interface INTERFACE2 {
  loading: boolean;
}

export default function FUNCTION2({
  loading
}: INTERFACE2) {
  const areaRef = createRef<HTMLTextAreaElement>();

  return (
    <>
          <FUNCTION1
            name="NAME"
            label="LABEL"
            ref={areaRef}
          />
    </>
  );
}

areaRefを使用する必要があるエラーをスローしますforwardRef。