// Files Listing

const renderFileList = (fileList: File[]) => {
if (!fileList || !Array.isArray(fileList)) {
return null
}

return (

  <List component='div' disablePadding sx={{marginLeft: 4}}>
    {fileList.map(file => (
      <ListItem key={file.id}>
        <ListItemIcon>
        {getFileIcon(file.name)}
        </ListItemIcon>
        <ListItemText primary={file.name} onClick ={()=>{

          if(typeof folderName === 'string' &&  folderName !=''){
            openUploadedFile(`${directory}/${folderName}/${file.name}`)
          } else if(typeof folderName === 'string' &&  folderName === '') {
            openUploadedFile(`${directory}/${file.name}`)
          }
        }}
         />

        <ListItemIcon onClick={event => setAnchorE2(event.currentTarget)}>
            <Icon icon='mdi:dots-vertical' />
          </ListItemIcon>
          <Menu
            anchorEl={anchorE2}
            open={Boolean(anchorE2)}
            onClose={() => setAnchorE2(null)}
          >
            <MenuItem onClick={() => {
                setEditingFolderId(file.id)
                console.log(file.name)
                }
                }>
                Rename
              </MenuItem>
            <MenuItem onClick={() => {
              console.log(file.name)
              handleFileDelete(file.name)
            }
          }>Delete</MenuItem>
          </Menu>

  

      </ListItem>
    ))}
  </List>

)

}

I tried the above code to delete any file in the list, but only the last uploaded file gets deleted