Custom drag and drop events not being triggered on table

[lorenzoMrt]

So, I'm currently working on a custom file browser and I'm using react table to show relevant data of a file (name, modified date, size, bla bla...) This table gets the data from aws cloud.
I'm trying to implement a custom drop event that, when it triggers, it captures the file being dragged and uploads it to my aws cloud. Problem is that when dropping the file on the row area, it triggers the default event of the browser (opens the file on new tab).
Note that I have overwritten the drop and dragover event as stated on this thread: prevent browser from loading a drag and dropped file in order to execute my custom event.
I narrowed down the issue to this bit of code:

{getRowModel().rows.map((row) => (
                    <tr
                      key={row.id}
                      onAuxClick={() => onAuxClick(row)}
                      onClick={(e) => onRowClick(e, row)}
                      className={row.getIsSelected() ? 'tr-selected' : undefined}
                    >
                      {row.getVisibleCells().map((cell) => (
                        <td key={cell.id}>
                          <div className='text-dark fw-normal text-hover-gray-700 mb-1 fs-6'>
                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
                          </div>
                        </td>
                      ))}
                    </tr>
                  ))}

This bit renders the table rows and its content by iterating through the rows of rowModel.
My guess is that flexRender is the problematic bit because I tested rendering the cell with its id as value and the drop event worked as expected