UseForm में प्रतिक्रिया है "एक क्लिक के पीछे" [नकल]

मैं का उपयोग कर रहा हूँ useForm हुक में प्रतिक्रिया है, और किसी कारण के लिए जब मैं मूल्यों में प्रवेश फार्म में पर क्लिक करें और सबमिट करें बटन, राज्य नहीं ले करता है मानों मैं प्रस्तुत किया है, लेकिन मूल्यों की खाली है.

तो, जब मैं प्रवेश की एक दूसरे सेट मूल्यों फार्म में है और इसे प्रस्तुत है, राज्य का मान लेता है पहली बार है ।

ऐसा लगता है कि यह हमेशा के लिए चला जाता है "एक क्लिक के पीछे" (देखें कंसोल.लॉग इन पर registerAccount समारोह)

मैं जुड़ा हुआ handleSubmit के अंदर के साथ registerAccount समारोह है, जो निष्पादित करना चाहिए अद्यतन के राज्य में रहता है कि खातों पर पहली क्लिक करें.

हूँ मैं कुछ याद आ रही है?

import {useForm} from 'react-hook-form'

const AddAccount = ()=> {

    const {register, handleSubmit, formState: { errors }} = useForm()
    
    const [items, setItems] = useState([])

    const registerAccount = (data)=> {
          setItems([...items, data]) 
          console.log(items)
    }

return(

<div>    

    <div className="grid grid-cols-1 justify-items-center">
        <h1 className="text-black font-bold py-2 text-2xl" >Agrega una cuenta</h1>
        <form onSubmit={handleSubmit(registerAccount)}>
            <table className="table-fixed">
                <thead>
                    <th className="w-1/2 "></th>
                    <th className="w-1/2 "></th>
                </thead>
                <tbody>
                    <tr>
                        <td><label className="py-1">Alias de la cuenta: </label></td>
                        <td><input defaultValue="" name="accountAlias" placeholder="Alias" 
                        className= "my-3 border-solid border-2 border-gray-900 py-1 px-3" 
                        {...register("accountAlias", {required: "Introduce el nombre de la cuenta"})}/>
                        <p className="text-red-500 text-sm">{errors.accountAlias?.message}</p>
                            </td>
                            
                    </tr>
                    <tr>
                        <td><label className="py-1">Tipo de cuenta: </label></td>
                        
                        <td><select name="accountType" className= "my-3 border-solid border-2 border-gray-900 py-1 px-3"
                        {...register("accountType", {required: "Selecciona el tipo de cuenta"})}>
                            <option value="">Selecciona...</option>
                            <option value="cuenta de gastos">Cuenta de gastos</option>
                            <option value="ahorro">Ahorro</option>
                            <option value="tarjeta de crédito">Tarjeta de crédito</option>
                            <option value="inversión">Inversión</option>
                            </select>
                            <p className="text-red-500 text-sm">{errors.accountType?.message}</p>
                            </td>
                    </tr>
                    <tr>
                        
                    </tr>
                </tbody>
            </table>

            <button className="bg-blue-500 text-white py-2 px-6 px-2 mt-4">Agregar</button>
        </form>
    </div>

</div>
)
}

export default AddAccount```