Не получаю изменение полей через onChange

Делаю форму добавления записи на сайт. Если я заполняю сразу поля с текстом, а потом прикрепляю изображение, то всё работает отлично - изображение отправляется на сервер, а данные отправляются в БД. Но если я сразу прикреплю изображение, то моя form, в которую я сохраняю данные перестаёт обновляться. Во время отладки я проверил, что даже после добавления изображения changeHandler всё ещё работает, но данные почему-то не обновляются. В чём может быть проблема?

Страница добавления

Ошибка, которую я получаю

Код React:

    import React, {useState, useCallback} from 'react';
    import {useHttp} from '../hooks/http.hook';
    import axios from 'axios';
    
    export const AdminPage = () => {

    const[img, setImg] = useState(null);
    const {loading, error, request} = useHttp();

    const [form, setForm] = useState({
        title: '', image: '', text: '', shortText: ''
    });
    const changeHandler = event => {
        if([event.target.name] == "image"){
            setImg(event.target.files[0]);
            setForm({ ...form, image:  event.target.files[0].name})
        } else {
            setForm({ ...form, [event.target.name]: event.target.value });
        }
    }
    const postHandler = useCallback(async () => {
        try {
            try{
                const data = new FormData();
                data.append('image', img);
    
                console.log(data)
    
                await axios.post("/api/upload", data, {
                    headers: {
                        'content-type': 'multipart/form-data'
                    }
                })
                
            } catch (err) {}
            console.log('Posting')
            const data = await request('/api/admin/post', 'POST', {...form})
        } catch (e) {}
    }, [img]);

    return (
        <div>
            <h1>AdminPage</h1>
            <div class="input-container">
                <label class="input-title" for="title">Title</label>
                <input class="input-field" type="text" autofocus id="title" name="title" required onChange={changeHandler}/>
                
                <label class="input-title" for="img">Img</label>
                <input class="input-field" type="file" name="image" required onChange={changeHandler}/>
                
                <label class="input-title" for="text">Text</label>
                <input class="input-field" type="text" id="text" name="text" required onChange={changeHandler}/>

                <label class="input-title" for="text">shortText</label>
                <input class="input-field" type="text" id="shortText" name="shortText" required onChange={changeHandler}/>
            </div>
            <div class="body-buttons">
                <button class="singin-button" onClick={postHandler}>APP POST</button>
                <button class="back-button" type="reset">RESET</button>
            </div>
        </div> 
    )
};

Ответы (1 шт):

Автор решения: Андрей Войтешик

Проблема была в useCallback, в зависимостях которого было img. Я убрал его и теперь всё работает корректно!

→ Ссылка