フォームにて、入力値が３文字以上ででsaveボタン押せるようにdisabledを入れたい

##実現したいこと
タイトル通りですが、フォームにて登録する際、Nameの入力値が３文字以上の時にSAVEボタンが押せるが、
３文字未満の時はSAVEボタンが押せないようにしたいです。

##試したこと
以下のようにコードを書きました。
※React　hookを使い、stateを持たせ、disabledをbuttonにセット、ボタンを押した時に入力値のチェックを行い、
OKだったら（入力値３文字以上の場合）ボタンがdisabledがfalseになることを想定し、書きました。
####Content.js

'use strict';
import React,{ useState } from 'react';
import { createStore } from "redux";

export default function Content(props) {
    //NAME３文字以上ででsaveボタン押せるようにdisabledを入れる
    const [checkName, setCheckName] = useState(true);
    console.log(props)
    return (
        <>
            <p>content</p>

            <Form
                onChangeId={props.onChangeId}
                onChangeName={props.onChangeName}
                setCheckName={setCheckName}
            />
            <button type="button"
                className="btn btn-outline-success"
                onClick={(e) => {props.onSaveItem();console.log(e)}}
                disabled = {checkName}
                >
                SAVE
            </button>
        </>
    );
}

function Form(props) {

    return (
        <form>
            <div className="form-group">
                <label className="pt-2">ID</label>
                <input id="id"
                    type="text"
                    className="form-control"
                    value={props.id}
                    onChange={(e) => props.onChangeId(e)}
                />
                <label className="pt-2">Name</label>
                <input id="name"
                    type="text"
                    className="form-control"
                    value={props.name}
                    onChange={
                        (e) =>
                        {
                            if (e.target.value.length >= 3){
                                setCheckName(false)
                                {props.onChangeName(e)}
                            }
                        }
                    }
                />
            </div>
        </form>
    )
}

####App.js

import React, { Component } from 'react';

import Aside from './components/Aside';
import Header from './components/Header';
import Footer from './components/Footer';
import Top from './components/Top';
import Content from './components/Content';


class App extends Component {
    constructor(props) {
        super(props);
    }

    // formId
    onChangeId = (e) => {
        console.log(e.target.value)
        this.props.updateFormId(e.target.value);
    }
    // forName
    onChangeName = (e) => {
        console.log(e.target.value)
        this.props.updateFormName(e.target.value);
    }
    // clickSaveButton
    onSaveItem = () => {
        console.log(this.props)
        console.log("SAVE_ID: ",this.props.id);
        console.log("SAVE_NAME: ",this.props.name);
    }

    render() {
        const formItem = this.props
        // formEvent
		const contentHandler = ({onChangeId, onChangeName, onSaveItem}) => ({ onChangeId, onChangeName, onSaveItem })
        console.log('App.render:', this.props);

        return (
            <div className="content">
                <Aside />
                <Header />
                    sample site
                {/* <div className="row">

                    <div className="col-5">
                        <p>test</p>
                    </div>
                </div> */}
                <Top />
                <br />
                <br />
                <br />
                <div className="container">
                    <Content formItem={formItem} {...contentHandler(this)} />
                </div>
                <br />
                <br />
                <br />
                <Footer />
            </div>
        );
    }
}
export default App;

##結果
NGパターンでもOKパターンでもSAVEボタンを押してもボタンが機能せず、setCheckNameが参照されないエラーが出ています。
※disabled機能を追加する前まではSAVEボタンにて、ログが出せていた。（Reduxを使用）
解決方法見つけられず、、、
何か、ヒントいただけるとありがたいです。

また、必要な情報があれば追記します。よろしくお願いします。

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

関連した質問