React-the state is already updated, but when calling setstate again, the value is still the old value

If I enter a fromAmount which is larger than the current toAmount, then toAmount value is expected to become fromAmount + $1.

    const initialObj = {
      fromAmount: '',
      toAmount: '',
      comment: ''
    };
    const [itemObj, setItemObj] = useState(initialObj);

    const setItemFieldHandler = (key, value) => {
      console.log("set", key, value);
      console.log("old state: ", itemObj);
      
      const newState = {
        ...itemObj,
        [key]: value
      };
      
      console.log("new state: ", newState);
      
      setItemObj(newState);
    };


    const handleFromAmountInput = useCallback((value) => {
       setItemFieldHandler('fromAmount', value);
      //check if from amount > to amount, 
      // then set toAmount = fromAmount + 1
      if(areBothAmountsValid()) {
         const newToAmount = value + 1;
         handleToAmountInput(newToAmount);
      }
    }, [itemObj]);


    const handleToAmountInput = useCallback((value => {
      setItemFieldHandler('toAmount', value);
    }, [itemObj]);
    }

The current from-amount is 1, to-amount is 5. If I change from-amount to 10, the console log is:

set fromAmount 10
old state: 
  {
    fromAmount: 1,
    toAmount: 5,
    comment: ''
  }
new state: 
   {
    fromAmount: 10,
    toAmount: 5,
    comment: ''
  }

set toAmount 11
old state: 
  {
    fromAmount: 1,
    toAmount: 5,
    comment: ''
  }
new state: 
   {
    fromAmount: 1,
    toAmount: 11,
    comment: ''
  }

What confuses me is that, fromAmount is already set as 10, why when calling handleToAmountInput(), the fromAmount’s value is still 1.

At first, I thought it is because the setState is async, so I used setTimeOut to make handleToAmountInput() running after like 5s to test, but the issue is still the same.

Does anyone know the reason and how to solve it?