Material UI DataGrid: Button to Delete Individual Row

I am making a React component using MaterialUI, that uses a Datagrid to store a queue of files. It looks like this:

So one feature I am trying to work on right now is where when the user clicks those three dots at the end of each row, a Menu (with one item) comes up that says "Delete" which can be used to delete that respective row. I'm having some trouble righting up the code for that. So this is the code I have for it:

const columns: GridColDef[] = [
      {
        field: 'filename',
        headerName: 'File Name',
        width: 350,
        editable: true,
      },
      {
        field: 'size',
        headerName: 'Size',
        width: 120,
        editable: true,
      },
      {
        field: 'date',
        headerName: 'Date',
        width: 120,
        editable: true,
      },
      {
          field: "",
          headerName: "",
          sortable: false,
          width: 80,
          disableClickEventBubbling: true,
          renderCell: (params) => {
            const handleDropdown = (event) => {
                setAnchorEl(event.currentTarget);
            }
            const handleClose = () => {
                setAnchorEl(null);
            };
            return(
                <div>
                    <IconButton
                       aria-label="more"
                       aria-controls="long-menu"
                       aria-haspopup="true"
                       onClick={handleDropdown}
                     >
                       <MoreHorizIcon />
                    </IconButton>
                    <Menu
                         id="fade-menu"
                         anchorEl={anchorEl}
                         keepMounted
                         open={open}
                         onClose={handleClose}
                     >
                         <MenuItem id={$(`params.id`)} onClick={() => deleteFile(params)}>Delete</MenuItem>
                    </Menu>
                 </div>
               );
          }
      }
    ];

const deleteFile = (params) => {
        console.log(params);
};

So within the MenuItem, I have it map to the function "deleteFile" when the user clicks on it, and I pass in "params." What I am trying to do i use the "id" number that is in params to set my state variable accordingly, but the problem I am having is that my params all end up being the same.

For reference, here is an example of how params would look like (i blurred out the filename):

What I mean by this is, if I have for example 6 files uploaded in the UI, the params all have the exact same id number, and the filename ends up being the name of the file that was the last one to upload. So in other words, I am passing in the exact same file object no matter what row I select. I'm not sure why this is happening, because I thought the "params" should vary depending on which row you select. Any ideas?