[FIX] Can't delete file from Room's file list (#22191)

Co-authored-by: Douglas Fabris <deefabris@gmail.com>

client/views/room/contextualBar/RoomFiles/Row.js

@@ -3,22 +3,13 @@ import React, { memo } from 'react';
 import FileItem from './components/FileItem';
 
 const Row = ({ item, data, index }) => {
-	const { userId, onClickDelete, isDeletionAllowed } = data;
+	const { onClickDelete, isDeletionAllowed } = data;
 
 	return (
 		item && (
 			<FileItem
 				index={index}
-				_id={item._id}
-				name={item.name}
-				url={item.url}
-				uploadedAt={item.uploadedAt}
-				user={item.user}
-				ts={item.ts}
-				type={item.type}
-				typeGroup={item.typeGroup}
 				fileData={item}
-				userId={userId}
 				onClickDelete={onClickDelete}
 				isDeletionAllowed={isDeletionAllowed}
 			/>

client/views/room/contextualBar/RoomFiles/components/FileItem.js

@@ -14,23 +14,10 @@ const hoverClass = css`
 	}
 `;
 
-const FileItem = ({ fileData }) => {
+const FileItem = ({ fileData, isDeletionAllowed, onClickDelete, index }) => {
 	const format = useFormatDateAndTime();
 
-	const {
-		_id,
-		name,
-		url,
-		uploadedAt,
-		ts,
-		user,
-		type,
-		typeGroup,
-		style,
-		onClickDelete,
-		className,
-		isDeletionAllowed,
-	} = fileData;
+	const { _id, name, url, uploadedAt, ts, type, typeGroup, style, className, user } = fileData;
 
 	return (
 		<Box display='flex' p='x12' style={style} className={[className, hoverClass]}>
@@ -46,6 +33,7 @@ const FileItem = ({ fileData }) => {
 				flexGrow={1}
 				flexShrink={1}
 				href={url}
+				key={index}
 			>
 				{typeGroup === 'image' ? <Avatar size='x48' url={url} /> : <FileItemIcon type={type} />}
 				<Box mis='x8' flexShrink={1} overflow='hidden'>