diff --git a/app/containers/UIKit/MessageBlock.tsx b/app/containers/UIKit/MessageBlock.tsx
index 3039d580539..6ca408e8015 100644
--- a/app/containers/UIKit/MessageBlock.tsx
+++ b/app/containers/UIKit/MessageBlock.tsx
@@ -10,7 +10,13 @@ export const messageBlockWithContext = (context: any) => (props: any) =>
 		</KitContext.Provider>
 	);
 
-const MessageBlock = ({ blocks }: any) => UiKitMessage(blocks);
+const MessageBlock = ({ blocks }: any) => {
+	if (!blocks) return null;
+	const renderedBlocks = UiKitMessage(blocks);
+	return Array.isArray(renderedBlocks)
+		? renderedBlocks.map(element => <React.Fragment key={element.props.blockId}>{element}</React.Fragment>)
+		: renderedBlocks;
+};
 
 export const ModalBlockWithContext = (props: any) => (
 	<KitContext.Provider value={props}>
diff --git a/app/containers/markdown/components/Inline.tsx b/app/containers/markdown/components/Inline.tsx
index 4811bcabdcc..c6f36100994 100644
--- a/app/containers/markdown/components/Inline.tsx
+++ b/app/containers/markdown/components/Inline.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Text } from 'react-native';
-import { type Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
+import { type Inlines as InlinesType, type Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
 
 import styles from '../styles';
 import { AtMention, Hashtag } from './mentions';
@@ -18,11 +18,14 @@ interface IParagraphProps {
 	forceTrim?: boolean;
 }
 
+type TInlineWithID = InlinesType & { _id: string };
+
 const Inline = ({ value, forceTrim }: IParagraphProps): React.ReactElement | null => {
 	const { useRealName, username, navToRoomInfo, mentions, channels } = useContext(MarkdownContext);
 	return (
 		<Text style={styles.inline}>
-			{value.map((block, index) => {
+			{value.map((b, index) => {
+				const block = b as TInlineWithID;
 				// We are forcing trim when is a `[ ](https://https://open.rocket.chat/) plain_text`
 				// to clean the empty spaces
 				if (forceTrim) {
@@ -41,20 +44,21 @@ const Inline = ({ value, forceTrim }: IParagraphProps): React.ReactElement | nul
 
 				switch (block.type) {
 					case 'IMAGE':
-						return <Image value={block.value} />;
+						return <Image key={block._id} value={block.value} />;
 					case 'PLAIN_TEXT':
-						return <Plain value={block.value} />;
+						return <Plain key={block._id} value={block.value} />;
 					case 'BOLD':
-						return <Bold value={block.value} />;
+						return <Bold key={block._id} value={block.value} />;
 					case 'STRIKE':
-						return <Strike value={block.value} />;
+						return <Strike key={block._id} value={block.value} />;
 					case 'ITALIC':
-						return <Italic value={block.value} />;
+						return <Italic key={block._id} value={block.value} />;
 					case 'LINK':
-						return <Link value={block.value} />;
+						return <Link key={block._id} value={block.value} />;
 					case 'MENTION_USER':
 						return (
 							<AtMention
+								key={block._id}
 								mention={block.value.value}
 								useRealName={useRealName}
 								username={username}
@@ -63,16 +67,16 @@ const Inline = ({ value, forceTrim }: IParagraphProps): React.ReactElement | nul
 							/>
 						);
 					case 'EMOJI':
-						return <Emoji block={block} index={index} />;
+						return <Emoji key={block._id} block={block} index={index} />;
 					case 'MENTION_CHANNEL':
-						return <Hashtag hashtag={block.value.value} navToRoomInfo={navToRoomInfo} channels={channels} />;
+						return <Hashtag key={block._id} hashtag={block.value.value} navToRoomInfo={navToRoomInfo} channels={channels} />;
 					case 'INLINE_CODE':
-						return <InlineCode value={block.value} />;
+						return <InlineCode key={block._id} value={block.value} />;
 					case 'INLINE_KATEX':
 						// return <InlineKaTeX value={block.value} />;
-						return <Text>{block.value}</Text>;
+						return <Text key={block._id}>{block.value}</Text>;
 					case 'TIMESTAMP':
-						return <Timestamp value={block.value} />;
+						return <Timestamp key={block._id} value={block.value} />;
 					default:
 						return null;
 				}
diff --git a/app/containers/markdown/components/Quote.tsx b/app/containers/markdown/components/Quote.tsx
index e8efbb86957..642dc65ae0e 100644
--- a/app/containers/markdown/components/Quote.tsx
+++ b/app/containers/markdown/components/Quote.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { type Quote as QuoteProps } from '@rocket.chat/message-parser';
+import { type Paragraph as ParagraphType, type Quote as QuoteProps } from '@rocket.chat/message-parser';
 
 import { themes } from '../../../lib/constants/colors';
 import { useTheme } from '../../../theme';
@@ -11,15 +11,18 @@ interface IQuoteProps {
 	value: QuoteProps['value'];
 }
 
+type TParagraphWithID = ParagraphType & { _id: string };
+
 const Quote = ({ value }: IQuoteProps) => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.container}>
 			<View style={[styles.quote, { backgroundColor: themes[theme].strokeLight }]} />
 			<View style={styles.childContainer}>
-				{value.map(item => (
-					<Paragraph value={item.value} />
-				))}
+				{value.map(i => {
+					const item = i as TParagraphWithID;
+					return <Paragraph key={item._id} value={item.value} />;
+				})}
 			</View>
 		</View>
 	);
diff --git a/app/containers/markdown/components/code/Code.tsx b/app/containers/markdown/components/code/Code.tsx
index aaf524f067d..4b000967e44 100644
--- a/app/containers/markdown/components/code/Code.tsx
+++ b/app/containers/markdown/components/code/Code.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { type Code as CodeProps } from '@rocket.chat/message-parser';
+import { type CodeLine as CodeLineType, type Code as CodeProps } from '@rocket.chat/message-parser';
 
 import styles from '../../styles';
 import { useTheme } from '../../../../theme';
@@ -10,6 +10,8 @@ interface ICodeProps {
 	value: CodeProps['value'];
 }
 
+type TCodeLineWithID = CodeLineType & { _id: string };
+
 const Code = ({ value }: ICodeProps): React.ReactElement => {
 	const { colors } = useTheme();
 
@@ -22,10 +24,11 @@ const Code = ({ value }: ICodeProps): React.ReactElement => {
 					borderColor: colors.strokeLight
 				}
 			]}>
-			{value.map(block => {
+			{value.map(b => {
+				const block = b as TCodeLineWithID;
 				switch (block.type) {
 					case 'CODE_LINE':
-						return <CodeLine value={block.value} />;
+						return <CodeLine key={block._id} value={block.value} />;
 					default:
 						return null;
 				}
diff --git a/app/containers/markdown/components/emoji/BigEmoji.tsx b/app/containers/markdown/components/emoji/BigEmoji.tsx
index 817e8b92346..f97cfd05c61 100644
--- a/app/containers/markdown/components/emoji/BigEmoji.tsx
+++ b/app/containers/markdown/components/emoji/BigEmoji.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { type BigEmoji as BigEmojiProps } from '@rocket.chat/message-parser';
+import { type Emoji as EmojiType, type BigEmoji as BigEmojiProps } from '@rocket.chat/message-parser';
 
 import Emoji from './Emoji';
 
@@ -8,6 +8,8 @@ interface IBigEmojiProps {
 	value: BigEmojiProps['value'];
 }
 
+type TEmojiWithId = EmojiType & { _id: string };
+
 const styles = StyleSheet.create({
 	container: {
 		flexDirection: 'row'
@@ -16,9 +18,10 @@ const styles = StyleSheet.create({
 
 const BigEmoji = ({ value }: IBigEmojiProps) => (
 	<View style={styles.container}>
-		{value.map(block => (
-			<Emoji block={block} isBigEmoji />
-		))}
+		{value.map(b => {
+			const block = b as TEmojiWithId;
+			return <Emoji key={block._id} block={block} isBigEmoji />;
+		})}
 	</View>
 );
 
diff --git a/app/containers/markdown/components/inline/Bold.tsx b/app/containers/markdown/components/inline/Bold.tsx
index 543296290c4..9dbbf305914 100644
--- a/app/containers/markdown/components/inline/Bold.tsx
+++ b/app/containers/markdown/components/inline/Bold.tsx
@@ -16,25 +16,27 @@ const styles = StyleSheet.create({
 	}
 });
 
+type TBoldWithID<T> = T & { _id: string };
+
 const Bold = ({ value }: IBoldProps) => (
 	<Text style={styles.text}>
-		{value.map(block => {
+		{value.map(b => {
+			const block = b as TBoldWithID<typeof b>;
 			switch (block.type) {
 				case 'LINK':
-					return <Link value={block.value} />;
+					return <Link key={block._id} value={block.value} />;
 				case 'PLAIN_TEXT':
-					return <Plain value={block.value} />;
+					return <Plain key={block._id} value={block.value} />;
 				case 'STRIKE':
-					return <Strike value={block.value} />;
+					return <Strike key={block._id} value={block.value} />;
 				case 'ITALIC':
-					return <Italic value={block.value} />;
+					return <Italic key={block._id} value={block.value} />;
 				case 'MENTION_CHANNEL':
-					return <Plain value={`#${block.value.value}`} />;
+					return <Plain key={block._id} value={`#${block.value.value}`} />;
 				default:
 					return null;
 			}
 		})}
 	</Text>
 );
-
 export default Bold;
diff --git a/app/containers/markdown/components/inline/Italic.tsx b/app/containers/markdown/components/inline/Italic.tsx
index 0817465c7dd..d71fdcad9e5 100644
--- a/app/containers/markdown/components/inline/Italic.tsx
+++ b/app/containers/markdown/components/inline/Italic.tsx
@@ -15,20 +15,23 @@ const styles = StyleSheet.create({
 	}
 });
 
+type TItalicWithID<T> = T & { _id: string };
+
 const Italic = ({ value }: IItalicProps) => (
 	<Text style={styles.text}>
-		{value.map(block => {
+		{value.map(b => {
+			const block = b as TItalicWithID<typeof b>;
 			switch (block.type) {
 				case 'LINK':
-					return <Link value={block.value} />;
+					return <Link key={block._id} value={block.value} />;
 				case 'PLAIN_TEXT':
-					return <Plain value={block.value} />;
+					return <Plain key={block._id} value={block.value} />;
 				case 'STRIKE':
-					return <Strike value={block.value} />;
+					return <Strike key={block._id} value={block.value} />;
 				case 'BOLD':
-					return <Bold value={block.value} />;
+					return <Bold key={block._id} value={block.value} />;
 				case 'MENTION_CHANNEL':
-					return <Plain value={`#${block.value.value}`} />;
+					return <Plain key={block._id} value={`#${block.value.value}`} />;
 				default:
 					return null;
 			}
diff --git a/app/containers/markdown/components/inline/Strike.tsx b/app/containers/markdown/components/inline/Strike.tsx
index 552b2fd3a72..e2ea2cf94fd 100644
--- a/app/containers/markdown/components/inline/Strike.tsx
+++ b/app/containers/markdown/components/inline/Strike.tsx
@@ -15,20 +15,23 @@ const styles = StyleSheet.create({
 	}
 });
 
+type TStrikeWithID<T> = T & { _id: string };
+
 const Strike = ({ value }: IStrikeProps) => (
 	<Text style={styles.text}>
-		{value.map(block => {
+		{value.map(b => {
+			const block = b as TStrikeWithID<typeof b>;
 			switch (block.type) {
 				case 'LINK':
-					return <Link value={block.value} />;
+					return <Link key={block._id} value={block.value} />;
 				case 'PLAIN_TEXT':
-					return <Plain value={block.value} />;
+					return <Plain key={block._id} value={block.value} />;
 				case 'BOLD':
-					return <Bold value={block.value} />;
+					return <Bold key={block._id} value={block.value} />;
 				case 'ITALIC':
-					return <Italic value={block.value} />;
+					return <Italic key={block._id} value={block.value} />;
 				case 'MENTION_CHANNEL':
-					return <Plain value={`#${block.value.value}`} />;
+					return <Plain key={block._id} value={`#${block.value.value}`} />;
 				default:
 					return null;
 			}
diff --git a/app/containers/markdown/components/list/TaskList.tsx b/app/containers/markdown/components/list/TaskList.tsx
index 059d02cb2d6..8b6e5805801 100644
--- a/app/containers/markdown/components/list/TaskList.tsx
+++ b/app/containers/markdown/components/list/TaskList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import { type Tasks as TasksProps } from '@rocket.chat/message-parser';
+import { type Task as TaskType, type Tasks as TasksProps } from '@rocket.chat/message-parser';
 
 import Inline from '../Inline';
 import styles from '../../styles';
@@ -11,24 +11,29 @@ interface ITasksProps {
 	value: TasksProps['value'];
 }
 
+type TTaskWithID = TaskType & { _id: string };
+
 const TaskList = ({ value = [] }: ITasksProps) => {
 	const { colors } = useTheme();
 	return (
 		<View>
-			{value.map(item => (
-				<View style={styles.row}>
-					<Text style={[styles.text, { color: colors.fontDefault }]}>
-						<CustomIcon
-							testID={item.status ? 'task-list-checked' : 'task-list-unchecked'}
-							name={item.status ? 'checkbox-checked' : 'checkbox-unchecked'}
-							size={24}
-						/>
-					</Text>
-					<Text style={[styles.inline, { color: colors.fontDefault }]}>
-						<Inline value={item.value} />
-					</Text>
-				</View>
-			))}
+			{value.map(i => {
+				const item = i as TTaskWithID;
+				return (
+					<View key={item._id} style={styles.row}>
+						<Text style={[styles.text, { color: colors.fontDefault }]}>
+							<CustomIcon
+								testID={item.status ? 'task-list-checked' : 'task-list-unchecked'}
+								name={item.status ? 'checkbox-checked' : 'checkbox-unchecked'}
+								size={24}
+							/>
+						</Text>
+						<Text style={[styles.inline, { color: colors.fontDefault }]}>
+							<Inline value={item.value} />
+						</Text>
+					</View>
+				);
+			})}
 		</View>
 	);
 };
diff --git a/app/containers/markdown/components/list/UnorderedList.tsx b/app/containers/markdown/components/list/UnorderedList.tsx
index 71e11f351f7..d7ca10114f5 100644
--- a/app/containers/markdown/components/list/UnorderedList.tsx
+++ b/app/containers/markdown/components/list/UnorderedList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { type UnorderedList as UnorderedListProps } from '@rocket.chat/message-parser';
+import { type ListItem, type UnorderedList as UnorderedListProps } from '@rocket.chat/message-parser';
 import { View, Text } from 'react-native';
 
 import Inline from '../Inline';
@@ -11,18 +11,23 @@ interface IUnorderedListProps {
 	value: UnorderedListProps['value'];
 }
 
+type TListItemWithID = ListItem & { _id: string };
+
 const UnorderedList = ({ value }: IUnorderedListProps) => {
 	const { theme } = useTheme();
 	return (
 		<View>
-			{value.map(item => (
-				<View style={styles.row}>
-					<Text style={[styles.text, { color: themes[theme].fontDefault }]}>{'\u2022 '}</Text>
-					<Text style={[styles.inline, { color: themes[theme].fontDefault }]}>
-						<Inline value={item.value} />
-					</Text>
-				</View>
-			))}
+			{value.map(i => {
+				const item = i as TListItemWithID;
+				return (
+					<View key={item._id} style={styles.row}>
+						<Text style={[styles.text, { color: themes[theme].fontDefault }]}>{'\u2022 '}</Text>
+						<Text style={[styles.inline, { color: themes[theme].fontDefault }]}>
+							<Inline value={item.value} />
+						</Text>
+					</View>
+				);
+			})}
 		</View>
 	);
 };
diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx
index c641b3f4cf8..9aca7bcc049 100644
--- a/app/containers/markdown/index.tsx
+++ b/app/containers/markdown/index.tsx
@@ -35,6 +35,28 @@ interface IMarkdownProps {
 	textStyle?: StyleProp<TextStyle>;
 }
 
+const generateId = (size = 16) => {
+	const rand = Math.random().toString(36).slice(2);
+	const time = Date.now().toString(36);
+	return (rand + time).slice(-size); // use from end
+};
+
+const assignIds = (block: any) => {
+	if (!block._id) {
+		const id = generateId();
+		block._id = id;
+	}
+
+	// add to nested
+	if (Array.isArray(block.value)) {
+		block.value = block.value.map((child: any) => assignIds(child));
+	}
+
+	if (Array.isArray(block.blocks)) {
+		block.blocks = block.blocks.map((child: any) => assignIds(child));
+	}
+	return block;
+};
 const Markdown: React.FC<IMarkdownProps> = ({
 	msg,
 	md,
@@ -58,6 +80,8 @@ const Markdown: React.FC<IMarkdownProps> = ({
 		return null;
 	}
 
+	tokens = tokens.map(assignIds);
+
 	if (isEmpty(tokens)) return null;
 	return (
 		<View style={{ gap: 2 }}>
@@ -75,29 +99,29 @@ const Markdown: React.FC<IMarkdownProps> = ({
 				{tokens?.map(block => {
 					switch (block.type) {
 						case 'BIG_EMOJI':
-							return <BigEmoji value={block.value} />;
+							return <BigEmoji key={block._id} value={block.value} />;
 						case 'UNORDERED_LIST':
-							return <UnorderedList value={block.value} />;
+							return <UnorderedList key={block._id} value={block.value} />;
 						case 'ORDERED_LIST':
-							return <OrderedList value={block.value} />;
+							return <OrderedList key={block._id} value={block.value} />;
 						case 'TASKS':
-							return <TaskList value={block.value} />;
+							return <TaskList key={block._id} value={block.value} />;
 						case 'QUOTE':
-							return <Quote value={block.value} />;
+							return <Quote key={block._id} value={block.value} />;
 						case 'PARAGRAPH':
-							return <Paragraph value={block.value} />;
+							return <Paragraph key={block._id} value={block.value} />;
 						case 'CODE':
-							return <Code value={block.value} />;
+							return <Code key={block._id} value={block.value} />;
 						case 'HEADING':
-							return <Heading value={block.value} level={block.level} />;
+							return <Heading key={block._id} value={block.value} level={block.level} />;
 						case 'LINE_BREAK':
-							return <LineBreak />;
+							return <LineBreak key={block._id} />;
 						// This prop exists, but not even on the web it is treated, so...
 						// https://github.com/RocketChat/Rocket.Chat/blob/develop/packages/gazzodown/src/Markup.tsx
 						// case 'LIST_ITEM':
 						// 	return <View />;
 						case 'KATEX':
-							return <KaTeX value={block.value} />;
+							return <KaTeX key={block._id} value={block.value} />;
 						default:
 							return null;
 					}