Why the onChange event returning the previous value of dropdown?

Question

I am trying to make a demo invoice with react and firebase. The goal is to autofill the item code and item price after getting the "itemname" value from dropdown. But at the initial change, its still showing the default values of the states. And from the 2nd change of dropdown, its collecting the previous "itemname" and filling "itemprice" and "itemcode" accordingly while in dropdown the itemname is changed.

const [items, setItems]: any = useState([]);
const [itemName, setItemName]:any = useState ("banana");
const [itemUnitPrice, setItemUnitPrice] = useState(10);
const [itemCode, setItemCode] = useState(20349);
const handleItemNameChange = (e:any) => {
    e.preventDefault();
    console.log("this is e", e);
    { setItemName(e.target.value)}
    {items.length != 0 && itemName != undefined && autofillItemDetails(items, itemName)}
}

function autofillItemDetails(itms:any, itmName:string) {
    console.log("autofill fuction ran");
    
    let i
    for(i = 0; i<items.length; i++){
        if (items[i].fruitname === itemName) {
                
                setItemUnitPrice(items[i].price)
                setItemCode(items[i].code)
                console.log("this is i", i);
                console.log("this is fruitname", items[i].fruitname);
                console.log("this is price", items[i].price);
                // break
            }
    }
}

useEffect(() => {
    getDocs(colRef)
    .then((snapshot) => {
        let itemsFirebase:any = []
        snapshot.docs.forEach((doc) => {
            
            itemsFirebase.push({...doc.data(), id:doc.id});
            // console.log("this is itemsfirebase",itemsFirebase)
            setItems(itemsFirebase)
            
        })
    })
    

}, [])
console.log("this is items",items
console.log("this is itemname", itemName)
    return (
        <table width='100%'>
            <thead>
                <tr>
                    <td>Item Code</td>
                    <td>Item Name</td>
                    <td>Unit Price</td>
                    <td>Qty</td>
                    <td>Total</td>
                </tr>
            </thead>
            <tbody>
              <tr className="h-10">
                <td>{itemCode}</td>
                <td>
                    <select  onChange={handleItemNameChange} value={itemName}>
                        {items.map((item:any) => (
                            <option key = {item.id}> {item.fruitname} </option>
                            
                        ))} 
                        {/* <option>Grapefruit</option>
                        <option>Mango</option>
                        <option>coconut</option>
                        <option>Litchi</option>
                        <option>Banana</option> */}
                    </select>

                 </td>
               
                <td>{itemUnitPrice}</td>
                <td>129</td>
                <td>1032</td>  
              </tr>  
            </tbody>
        </table>
    )
   }