Why I can't get the right state when I try to console log inside on my onchange handler? - reactjs

Question

I have problem regarding on getting all the state inside of my HandlerInputChange the data already updated into 10 data however when I console it log inside of my handler it shows the default array value which is 5.
Question: How to get the all the state data inside of my handler?
Goal: To get all the state on my handler
Logs:
My UseState:
const [data, setData] = useState(defaultArray)
My Handler:
useEffect(() => {
console.log("data" , data)
}, [data])
const handleInputChange = (e, i) => {
const { name, value } = e.target;
const list = [...data];
console.log(list);
}
Add Rows Function:
const AddRows = () => {
//loop here the keys listed
let initialKey = 0;
const x = data.slice(-1);
initialKey = parseInt(x[0]['key']);
let newArr=[...Array(5)].map((_,i)=>{
let val=i + 1 +initialKey;
return {
key: ""+val+"",
customer: <select className="form-control" name="customer" onChange={(e,i) => handleInputChange(e,val)}>
<option disabled selected>Select Customer</option>
<option >LEXI INC / joseph</option>
<option >LEXI INC / james</option>
<option >LEXI INC / charlie</option>
<option >LEXI INC / pam</option>
<option >LEXI INC / regorio</option>
</select>,
bank: <select className="form-control" name="bank" onChange={(e,i) => handleInputChange(e,val)}>
<option disabled selected>Select Bank</option>
<option >BDO</option>
<option >MAY BANK</option>
<option >EAST WEST BANK</option>
<option >UNION BANK</option>
<option >BPI</option>
</select>,
branch: <input className="form-control" placeholder="Branch" name="branch" onChange={(e,i) => handleInputChange(e,val)}/>,
checkNo: <input type="number" className="form-control" name="checkNo" placeholder="Check No." onChange={(e,i) => handleInputChange(e,val)}/>,
checkDate: <input type="date" name="checkDate" className="form-control" onChange={(e,i) => handleInputChange(e,val)}/>,
amount: <input
name="amount"
className="form-control"
placeholder="Amount"
onChange={(e,i) => handleInputChange(e,val)}
/>,
remarks: <select className="form-control" name="remarks" onChange={(e,i) => handleInputChange(e,val)}>
<option disabled selected>Select Remarks</option>
<option >Test</option>
</select>
}
});
setData([...data, ...newArr]);
}
Button:
<button type="submit" class="btn btn-danger" onClick={() => AddRows()}>Add Row</button>

Answer 1

Your handleInputChange is not the problem. Normally, it will be return an array with 10 elements like the variable defaultArray.
perhaps the problem is line 1 and 3