React component not sending variable value with onChange event

I am trying to display more than one task using the same react component and a map function. The components is supposed to upload a file and display the file that has been upload or is uploading with an onChange event, an onSubmit event will be added later to send the file to the back-end. Since the component is being dynamically rendered with an onChange event I am sending the li key as a parameter then only rendering the filename to the li that matches based on the key. The issue I am currently having is when I send the key in the onChange the value is not getting to the function. I have even tried setting a state for the key and then pulling that into the function but I get back undefined I have tried 100 other things as well and either get back undefined or 0. This is my first post on here and I am also just a junior dev so I may be missing info needed here if so please let me know.

Here is the code

   const onChange = (e, index) => {
        setFilename(e.target.files[0].name)
        setArrFiles([...arrFiles, {key:index, file:e.target.files[0].name} ]) 
    }

    const displayTask = (index) => {
        let upload = []
        arrFiles.forEach(el => {
            if(el.key === index) {
                upload.push(el.file)
            }
        })
        return upload.map((file) => (
            <li key={index}>{file}</li>
        ))
    }
{database.map((task, index) => (
                <li key={index}>
                    <p>{index}</p>
                    <div className="userPortal__tasksContainer">
                        <div className='userPortal__tasksHeader'>
                            <p className='userPortal__tasksHeaderTitle'>{task.taskTitle}</p>
                            <p className='userPortal__tasksHeaderInfo'>{task.taskMessage}</p>
                        </div>
                        <div className='userPortal__tasksBodyButtons'>
                            <form className='userPortal__fileUpload'>
                                <input className='userPortal__inputButton' multiple id='file' type="file" onChange={e => onChange(e, index)}/>
                                <label htmlFor='file'>Choose File</label>
                            </form>
                            <button className='userPortal__tasksBodyButton green'>Task Complete</button>
                        </div>
                        <p id='userPortalFooterTitle'>Successfully Uploaded</p>
                        <div className='userPortal__footer'>
                            <ul>
                                {displayTask(index)}
                            </ul> 
                        </div>
                    </div>
                </li>
            ))}

Answer

The issue here was like a dummy I hard coded the input ID so when referencing the input field it would only get the hard coded value instead of the index of the component.

Here is the updated form.

                           <form className='userPortal__fileUpload'>
                               <input className='userPortal__inputButton' multiple id={index} type="file" onChange={(() => (e) => onChange(e, index))()}/>
                               <label htmlFor={index}>Choose File</label>
                           </form>