значения по умолчанию для обновления, не загружаемого в форме ловушки React

Question

Я создаю форму обновления для элементов в моем приложении. Я использую REACT с крючком REACT. Сначала данные объекта из серверной части извлекаются в одном компоненте. Через реквизиты данные поступают в следующий компонент. Это работает, как я вижу в моем журнале консоли (IUpdate), но при первом рендеринге он получает пустой массив. Только во втором рендере виден массив с обновляемым объектом. Опция Useform: значения по умолчанию, которые я связываю с этими данными. Но предварительное заполнение формы работает только тогда, когда я выполняю небольшой трюк с начальными значениями usestate result / setResult (случайным образом меняя местами эти значения: null / empty String / currentData). Есть ли у кого-нибудь идеи, что мне здесь не хватает? Или есть лучший способ сделать форму обновления с формой React Hook. Ниже мой код:

/// ПЕРВЫЙ КОМПОНЕНТ ДЛЯ ПОЛУЧЕНИЯ ОБЪЕКТА:

      import React, {useContext, useEffect, useState} from 'react';
import axios from "axios";
import './AddItem.css';
import {useParams} from "react-router-dom";
import ItemUpdate from "./reusableComponents/ItemUpdate";

function ChangeItem () {

    const {id} = useParams();
    const [loading, toggleLoading] = useState(false);
    const [error, setError] = useState('');
    const [Success, toggleSuccess] = useState(false);
    const [currentItem, setCurrentItem] = useState([]);


    useEffect(() => {
        async function getCurrent() {

            try {
                const response = await axios.get(`http://localhost:8080/api/v1/items/${id}`);
                console.log('response in van change getCurrent', response.data)

                setCurrentItem(response.data)

            } catch (error) {
                console.error('Er ging iets mis, geen data gevonden', error)
            }
        }

        getCurrent();
    }, []);


    return currentItem ? <ItemUpdate current={currentItem}/> : <div>Loading...</div>
} export default ChangeItem;

///////// ВТОРОЙ КОМПОНЕНТ, СОДЕРЖАЩИЙ ФОРМУ

      import React, {useContext, useEffect, useState} from 'react';
import { useForm } from 'react-hook-form';
import axios from "axios";
import '../AddItem.css';

import {GrEdit, GrUpload} from "react-icons/gr";

function ItemUpdate (props) {
    console.log("props in IUpdate",props.current);
    const currentData =props.current;
    const { handleSubmit, formState: { errors }, register, reset } = useForm(
          {defaultValues : currentData}
    );
     const [loading, toggleLoading] = useState(false);
     const [error, setError] = useState('');
     const [Success, toggleSuccess] = useState(false);
     const [result, setResult] = useState("currentData");
    const onSubmit = (data) => setResult(JSON.stringify(data));


    async function sendUpdated (formData) {
        setError('');
        toggleLoading(true);

        try {
            const res = await axios.put('http://localhost:8080/api/v1/items/update',formData)
            console.log('res in update',res)
            toggleSuccess(true);
        } catch (e) {
            console.log(console.error(e))
            setError(`Het updaten is gelukt. 
            // Probeer het opnieuw (${e.message}
            )`);
        }
    }

    const formData = new FormData();

    const formSubmit = (data) => {
        formData.append("id", data.id)
        formData.append("description", data.description)
        formData.append("name", data.name)
        formData.append("difficulty", data.difficulty)
        formData.append("file", data.file[0])


        sendUpdated(formData)
    }

    return (
        <div className="add-item-container">
            <div className="add-items">
                <h1>Bewerk plant</h1>
                <form onSubmit={handleSubmit(formSubmit)} className="add-item" >
                    <input  type="text"
                            className="add-item-field"
                       
                            {...register("id", {

                            })}
                    />
                    <input  type="text"
                            className="add-item-field"
                            
                            {...register("name", {

                            })}
                    />{errors.address && <p className="errorMessage">Het veld is niet ingevuld</p>}

                    <textarea   className="add-item-field"
                                cols="30" rows="10"
                               
                                {...register("description")}
                    />
                    {errors.address && <p className="errorMessage">Vergeet niet een verzorgingshandleiding of beschrijving in te vullen</p>}

                    <div className="selectField">
                        <h3>Verzorging</h3>
                        <input  className="choose"
                                type="radio"
                                id="easy"
                               
                                value="EASY" {...register("difficulty")}/>
                        <label htmlFor="easy">Makkelijk</label>
                        <input  className="choose"
                                type="radio"
                                id="moderate"
                              
                                value="MODERATE" {...register("difficulty")}/>
                        <label htmlFor="moderate">Gemiddeld</label>
                        <input  className="choose"
                                type="radio"
                                id="hard"
                               
                                value="HARD" {...register("difficulty")}/>
                        <label htmlFor="hard">Moeilijk</label>
                    </div>
                    <div className="upload">
                        <input type="file" {...register("file", {

                        })} accept="image/jpeg"
                        />
                        {errors.address && <p className="errorMessage">Er ging iets mis met uploaden. Probeer het opnieuw.</p>}
                        <GrUpload/>
                    </div >
                    <button className="form-btn">Wijzig de plant</button>
                    {Success === true && <p>De plant is succesvol gewijzigd!</p>}
                    {error && <p className="error-message">{error}</p>}
                </form>
            </div>
        </div>
    )
} export default ItemUpdate;