ReactのuseStateでテキストボックスの値を取得・利用する方法

my-react-app/
├── index.html                 # アプリのエントリーポイント
├── src/                       # ソースコードを格納するディレクトリ
│   ├── components/            ### 今回作成 ###
│   │   └── TextboxSample.jsx  ### 今回作成 ###
│   ├── App.jsx                # メインコンポーネント（TypeScript形式）
│   └── main.jsx               # ReactDOMをレンダリングするエントリーポイント
├── package.json               # プロジェクトの依存関係とスクリプト
├── tsconfig.json              # TypeScriptの設定ファイル
└── vite.config.js             # Viteの設定ファイル

import { useState } from 'react';

const TextboxSample = () => {
    // State定義
    const [text, setText] = useState("");
    
    // テキストボックスが変更されたら、State更新
    const handleTextBox = e => {
        setText(e.target.value);
    }

    // ボタン押下でStateをコンソールに出力
    const submit = () => {
        console.log(`入力値は、${text}です！`)
    }

    return (
        <div>
            <form>
                <label htmlFor="name">名前：</label>
                <input type="text" id="name" name="text" value={text} onChange={handleTextBox}/>
                <button type="button" onClick={submit}>送信</button>
            </form>

            <p>現在のState:{text}</p>
        </div>
    )
};

export default TextboxSample;

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
// TextboxSampleのインポート
import TextboxSample from './components/TextboxSample'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <TextboxSample />
  </StrictMode>,
)

import { useState } from 'react';

const [text, setText] = useState("");

const handleTextBox = e => {
    setText(e.target.value);
}

const submit = () => {
    console.log(`入力値は、${text}です！`)
}

return (
        <div>
            <form>
                <label htmlFor="name">名前：</label>
                <input type="text" id="name" name="text" value={text} onChange={handleTextBox}/>
                <button type="button" onClick={submit}>送信</button>
            </form>

            <p>現在のState:{text}</p>
        </div>
    )