onChange event inside loop is only passing 0th index

The following code is a input component which uploads an image and I am using a function “handleImageChange” to trigger onChange event. it is inside a loop

{images.map((x,i) => (
    <Grid item>
           <Input
              accept="image/*"
              id="change-image-file"
              required
              type="file"
              onChange={(e) => handleImageChange(e, i)}
           />
    </Grid>
)}

 const handleImageChange = (e, index) =>{
       conole.log(index)   // whichever index I click it always returns 0
       conole.log(e.target.files[0])  // however e.target.value works alright
 }

this is the image in correspondence with the code where I am clicking the 2nd image button but still getting the index 0

I am using React 18, Material UI 5, and the “Input” & “Grid” is from material UI which resembles HTML “input” & “div” respectively.