ReactのuseImperativeHandleで親に見せる操作を絞る方法

import { useState, type Ref } from 'react';

// 受け取った ref を、そのまま <textarea> に渡す（親に DOM ごと見せる）
export function RawCommentBox({ ref }: { ref?: Ref<HTMLTextAreaElement> }) {
  const [text, setText] = useState('猫の手を借りたい');
  const [sent, setSent] = useState<string | null>(null);
  return (
    <div className="box">
      <textarea ref={ref} value={text} onChange={(e) => setText(e.target.value)} />
      <p className="count">{text.length} / 140</p>
      <button type="button" onClick={() => setSent(text)}>送信</button>
      {sent !== null && <p className="sent">送信した内容：「{sent}」</p>}
    </div>
  );
}

// 親が DOM を直接書き換えて、入力欄を空にする
export function RawParent() {
  const ref = useRef<HTMLTextAreaElement>(null);
  return (
    <div className="parent">
      <button type="button" className="clear" onClick={() => {
        if (ref.current) ref.current.value = '';
      }}>親から消す</button>
      <RawCommentBox ref={ref} />
    </div>
  );
}

--- DOM をそのまま渡す（RawParent） ---
最初: 入力欄=「猫の手を借りたい」 文字数=8 / 140 （まだ送信していない）
親から消す: 入力欄=「」 文字数=8 / 140 （まだ送信していない）
送信: 入力欄=「猫の手を借りたい」 文字数=8 / 140 送信した内容：「猫の手を借りたい」

import { useImperativeHandle, useRef, useState, type Ref } from 'react';

// 親に見せる操作は、この2つだけ
export type CommentBoxHandle = {
  focus: () => void;
  clear: () => void;
};

export function CommentBox({ ref }: { ref?: Ref<CommentBoxHandle> }) {
  const [text, setText] = useState('猫の手を借りたい');
  const [sent, setSent] = useState<string | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useImperativeHandle(ref, () => ({
    focus() {
      textareaRef.current?.focus();
    },
    clear() {
      setText('');
      textareaRef.current?.focus();
    },
  }), []);

  return (
    <div className="box">
      <textarea ref={textareaRef} value={text} onChange={(e) => setText(e.target.value)} />
      <p className="count">{text.length} / 140</p>
      <button type="button" onClick={() => setSent(text)}>送信</button>
      {sent !== null && <p className="sent">送信した内容：「{sent}」</p>}
    </div>
  );
}

// 親は、子が見せた clear() を呼ぶだけ
export function HandleParent() {
  const ref = useRef<CommentBoxHandle>(null);
  return (
    <div className="parent">
      <button type="button" className="clear" onClick={() => ref.current?.clear()}>親から消す</button>
      <CommentBox ref={ref} />
    </div>
  );
}

--- useImperativeHandle で絞る（HandleParent） ---
最初: 入力欄=「猫の手を借りたい」 文字数=8 / 140 （まだ送信していない）
親から消す: 入力欄=「」 文字数=0 / 140 （まだ送信していない）
送信: 入力欄=「」 文字数=0 / 140 送信した内容：「」

DOM をそのまま渡したときの ref.current: HTMLTextAreaElement
  HTMLElement か: true
  focus があるか: true
  clear があるか: false
  value があるか: true
  style があるか: true
  remove があるか: true
useImperativeHandle のときの ref.current: Object
  HTMLElement か: false
  持っているプロパティ: focus, clear
  focus があるか: true
  clear があるか: true
  value があるか: false
  style があるか: false
  remove があるか: false

const rawRef = useRef<HTMLTextAreaElement>(null);
  const handleRef = useRef<CommentBoxHandle>(null);
  const onClick = () => {
    rawRef.current?.remove(); // DOM を渡す子には、何でもできてしまう
    handleRef.current?.focus();
    handleRef.current?.remove();
    if (handleRef.current) handleRef.current.style.opacity = '0.5';
  };

types/TypeError.tsx(11,24): error TS2339: Property 'remove' does not exist on type 'CommentBoxHandle'.
types/TypeError.tsx(12,46): error TS2339: Property 'style' does not exist on type 'CommentBoxHandle'.

// 依存配列が [] … 最初の描画のときだけハンドルを作る
export function EmptyDepsDraft({ ref }: Props) {
  const [text, setText] = useState('');
  useImperativeHandle(ref, () => {
    created.empty++;
    return { getText: () => text };
  }, []);
  return <textarea value={text} onChange={(e) => setText(e.target.value)} />;
}

// 依存配列が [text] … text が変わるたびに作り直す
export function TextDepsDraft({ ref }: Props) {
  const [text, setText] = useState('');
  useImperativeHandle(ref, () => {
    created.text++;
    return { getText: () => text };
  }, [text]);
  return <textarea value={text} onChange={(e) => setText(e.target.value)} />;
}

（操作：「に」と入力 →「にゃ」と入力 → 親だけを描き直す）
--- 依存配列が [] ---
createHandle が呼ばれた回数: 1
ref のコールバックに渡った値: ハンドル
入力欄=「にゃ」 getText()=「」
--- 依存配列が [text] ---
createHandle が呼ばれた回数: 3
ref のコールバックに渡った値: ハンドル → null → ハンドル → null → ハンドル
入力欄=「にゃ」 getText()=「にゃ」
--- 依存配列なし ---
createHandle が呼ばれた回数: 4
ref のコールバックに渡った値: ハンドル → null → ハンドル → null → ハンドル → null → ハンドル
入力欄=「にゃ」 getText()=「にゃ」