I using useState to make handleChange() func. to update my form value and sent to other component for further using. but when I console.log() the value from state to checked that what value are stored right now, I found that It store the previous one.

example

input form: "a" console.log: ""

input form: "ab" console.log: "a"

input form: "abc" console.log: "ab"

setState update the previous one not the latest one. So when I submit the form value will missing the latest value of the form

All of My handleChange() and <input> be like this:

  const [classDataValue, setclassDataValue] = useState({
    className: "",
    classType: "",
    ownerEmail: user,
    collEmail: "",
    periodList: [],
    PollList: [],
  });

 function handleClassChange(e) {
    //handle the change of the input
    const { name, value } = e.target;
    console.log(name, value);
    setclassDataValue((prev) => ({
      ...prev,
      [name]: value,
    }));
    console.log(classDataValue); //still show previous value after set the new one
  }


  return(
    <input
       required
       type="text"
       id="ClassName"
       name="ClassName"
       onChange={handleClassChange}
    ></input>

      //others Input form
  )

Once I found some solutions like use setState callback, but I tried it and not working for me. So, I don't know how to handle this problem and stuck for 2 days now. If anyone have any Idea or solution, It's gonna be help me a lot. thank you