Reactで入れ子にしているStateを正常に変更できない

Question

前提・実現したいこと

Reactで動画を複数個登録できる動的フォームを作成しております。
Formは動的に追加できたのですが、Stateを正常に変更できません。
動的フォームではどのように入れ子にしているStateを変更すればいいのでしょうか？

発生している問題・エラーメッセージ

下記ソースコードでFlgを変更するとフォームが追加され、Stateの値が正常に入らない。

該当のソースコード

export const VideoForm = (prop) => {
    const initialVideoState = {
        'video': '',
        'valid_flg': false,
    }

    const [title, setTitle] = useState("");
    const [video, setVideo] = useState([initialVideoState]);

    const handleSubmit = (e) => {
        e.preventDefault();

        const formData = new FormData();
        formData.append('title', title);
        formData.append('project', prop.projectId);
        video.map(v => {
            formData.append('video', v.video, v.video.name);
            formData.append('valid_flg', v.valid_flg);
        })

        // API通信
    }

    const AddForm = (e) => {
        e.preventDefault();
        var newVideo = [];
        video.map(v =>{
            newVideo.push(v);
        });
        newVideo.push(initialVideoState);
        console.log('追加イベント')
        setVideo(newVideo);
    }

    // ここで正常に値が入らず、フォームが一つ追加される
    const handleChange = (hogehoge, e) => {
        e.preventDefault();
        var target = video.find(v => v===hogehoge);

        setVideo([
            ...video,
            video.find(v => v===hogehoge)['valid_flg'] = true
        ]);
        console.log(video);
    }

    return(
        <>
            <label>
                タイトル:
                <input type="text" name="title" value={ title } onChange={ (e) => setTitle(e.target.value) } />
            </label>
            {video.map(v =>
                    <div>
                        <label>
                            動画:
                            <input type="file" name="video" accept='video/*' alt="動画" />
                        </label>
                        <label>
                            フラグ:
                            <input type="checkbox" name="valid_flg" onChange={ (e) => handleChange(v, e) } checked={v.valid_flg} />
                        </label>
                    </div>
            )}
        </>
    )
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

// ここで正常に値が入らず、フォームが一つ追加される

そうですね、setVideo([...video, 何か])では、もとのvideoに「何か」の項目を追加する、という意味になってしまいます。

Comments

[te_ff]

ありがとうございます。
var newVideo = [...video];
newVideo.find(v => v===hogehoge).valid_flg = e.target.checked;
setVideo(newVideo);
とすると解決できました。
リアルタイムで再描画されない問題が発生いたしましたが別問題なので一度こちらは解決済みとさせていただきます。