Input type=["file"] handling events display information only of first element of the map

Question

I am attempting to create an admin table in React that enables an administrator to upload a CSV file to the database. When the administrator selects a CSV file, an onChange handler triggers a function, which then sends the CSV data to the backend along with the ID of the corresponding table row (map element). However, after uploading CSV data from multiple table rows to the database, I discovered that it assigned the same table row ID to all CSV documents in the MongoDB database.

The map only has two elements with the following IDs: 645caec48acd092e4c804374 and 645cd07a70492061397dffa8.

Here is table map:

{bagsData.map((bag,index) => (
                        <tr name={bag._id} key={index} tabIndex={index}>
                          <td>{bag.name}</td>
                          <td>{bag.description}</td>
                          <td>{bag.material}</td>
                          <td><img className='bag-photo' src={bag.photo}/></td>
                          <td><button className='reject-button' onClick={ async () => await deleteBag(bag._id)}>Delete</button></td>
                          <td><button className='change-button'>Change</button></td>
                          <td className='csv-uploader'>
                              <label htmlFor="csv" className='change-button'>Upload csv</label>
                              <input id="csv" type="file" name="uuid-csv" onChange={ (event) => handleUploadCsv(event, bag._id)}/>
                          </td>
                        </tr>
))} 

I attempted to replace the onChange function with one that logs the ID of the table row to the console, but it still only logs the ID of the first row. Additionally, I tried creating a function similar to the delete function from above, which works well, but encountered the same result.