React useState() hook not updating

I am trying to save the error API responses for the backend as an array/object using useState hook. to my surprise, the state value did not get updated. (Note: this is a practice challenge from a youtube post)

  const onSubmit = (ev) => {
    ev.preventDefault();

    const payload = { ...survey }; // destructure and create new object payload
    if (payload.image) {
      payload.image = payload.image_url;
    }
    delete payload.image_url;
    let res = null;
    if (id) {
      res = axiosClient.put(`/survey/${id}`, payload);
    } else {
      res = axiosClient.post("/survey", payload);
    }

    res
      .then((res) => {
        console.log(res);
        navigate("/surveys");
        if (id) {
          showToast("The survey was updated");
        } else {
          showToast("The survey was created");
        }
      })
      .catch((err) => {
        if (err && err.response) {
          setError(err.response.data.message);
          setErry('1234');
        }
         console.log(err, err.response);
         console.log(erry)
     
      
  
      });
  };

//the form
 <form action="#" method="POST" onSubmit={onSubmit}>

Another trial to this while trying to isolate the problem

const [count, setCount] = useState(0);

  const increment = (ev) => {
       ev.preventDefault();
      setCount(4);
      alert('The count is ' + count);
  }

//the form
 <form action="#" method="POST" onSubmit={increment }>

// i still get count as 0 every time i click submit.

what am i missing please?