Errors state is not updating on first click

Question

I am making a form to update addresses. When the user clicks on the submit button, the form isn't being submitted but after the click the errors are updated correctly and the form submits fine. Here is what im working with

 const [errors, setErrors] = React.useState({
    firstName: '',
    lastName: '',
    streetAddress: '',
    streetAddress2: '',
    city: '',
    zipCode: ''
  });
  
  const validateRequiredFields = () => {
    let inputError = {};
    Object.keys(user).forEach(
      (key) => {
        inputError = { ...inputError, ...RequiredValidation(user, key) };
      }
    );
    
    setErrors({ ...errors, ...inputError });

The Validation returns inputError which takes in the values and sets to null instead of empty strings if theres no error. When I console.log this it returns the correct format. Also if there is errors, the errors are updated correctly on first click. Having looked into this I saw that most recent state isn't always fetched which I believe is my problem & the other threads I looked into recommended something like this although I don't know if thats how I am supposed to set it up.

setErrors({ ...errors, ...inputError }, () => {
    setErrors({ ...errors, ...inputError });
    });

Answer 1

Use

setErrors((prevErrors) => ({ ...prevErrors, ...inputError }));