How to Setup Our Own Sendgrid, Mailgun or Postmark like SMTP Server

React Form submit not added first element to array, only the second and more

Mike

const ListForm = () => {
    const [enteredUserName, setEnteredUserName] = useState('');
    const [enteredUserAge, setEnteredUserAge] = useState('');
    const [error, setError] = useState(false);
    const [users, setUsers] = useState([]);

    const submitHandler = (event) => {
        event.preventDefault();
        if (enteredUserName.trim().length === 0 || enteredUserAge.trim().length === 0) {
            setError(true);
            return;
        }
        if (enteredUserAge.trim() < 0) {
            setError(true);
            return;
        }

        addUsers(enteredUserName, enteredUserAge);
        setError(false);
        console.log(users);
        console.log(enteredUserName, enteredUserAge);
    }

    const addUsers = (uName, uAge) => {
        setUsers((prevUsers) => {
            return [
                ...prevUsers,
                { name: uName, age: uAge, id: Math.random().toString() },
            ];
        })
    }

    const userNameOnChange = (event) => {
        setEnteredUserName(event.target.value);
    }

    const userAgeOnChange = (event) => {
        setEnteredUserAge(event.target.value);
    }

    return (
        <div style={{width: '300px', textAlign: 'center', margin: '20px auto'}}>
            <form onSubmit={submitHandler}>
                <div className='mb-3'>
                    <label htmlFor="userName">User Name</label>
                    <input type="text" className='form-control' id='userName'  value={enteredUserName} onChange={userNameOnChange} />
                </div>
                <div className='mb-3'>
                    <label htmlFor="userAge">Age</label>
                    <input type="number" className='form-control' id='userAge' value={enteredUserAge} onChange={userAgeOnChange} />
                </div>
                <div style={{ visibility: error ? 'visible' : 'hidden' , color: 'red'}}>

                    <span>An error occurred while sending a form. Please fix it.</span>
                </div>
                <button type='submit' className='btn btn-primary'>Add</button>
            </form>
            <div>

            </div>
        </div>
    );
};

export default ListForm;

My console result is an empty array when clicked the Add item button first time, then other click it works. Only the first element adding is not working. Please help what is the wrong with the array and input fill. My console result is an empty array when clicked the Add item button first time, then other click it works. Only the first element adding is not working. Please help what is the wrong with the array and input fill.