【React】テキストボックス1でエンターキーを押してテキストボックス2にフォーカスを変更する

タイトル通り、Reactでテキストボックス1でエンターキーを押してテキストボックス2にフォーカスを変更できるよう実装します。

sample.html

<div className="TextBox1">
 テキストボックス1<br />
 <input type="text" id="textbox1" onKeyDown={handleKeyDown} />
</div>
<div className="TextBox2">
 テキストボックス2<br />
 <input type="text" id="textbox2" />
</div>

sample.tsx

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.nativeEvent.isComposing || e.key !== "Enter") return;
  // 次のテキストボックスへ飛ばす処理を記載
  document.getElementById("textbox2")?.focus();
};