[FIX] Markdown's ListItem not using the entered index (#4388)

* fix ordered list number

* update snapshot

app/containers/ActionSheet/ActionSheet.tsx

@@ -142,7 +142,8 @@ const ActionSheet = React.memo(
 						onChange={index => index === -1 && onClose()}
 						// We need this to allow horizontal swipe gestures inside bottom sheet like in reaction picker
 						enableContentPanningGesture={data?.enableContentPanningGesture ?? true}
-						{...androidTablet}>
+						{...androidTablet}
+					>
 						<BottomSheetContent options={data?.options} hide={hide} children={data?.children} hasCancel={data?.hasCancel} />
 					</BottomSheet>
 				)}

app/containers/ReactionsList.tsx

@@ -62,7 +62,8 @@ const TabBarItem = ({ tab, index, goToPage, baseUrl, getCustomEmoji }: ITabBarIt
 			}}
 			style={({ pressed }: { pressed: boolean }) => ({
 				opacity: pressed ? 0.7 : 1
-			})}>
+			})}
+		>
 			<View style={styles.tabBarItem}>
 				<Emoji
 					content={tab.emoji}
@@ -91,7 +92,8 @@ const ReactionsTabBar = ({ tabs, activeTab, goToPage, baseUrl, getCustomEmoji, w
 								width: tabWidth,
 								borderBottomWidth: isActiveTab ? 2 : 1,
 								borderColor: isActiveTab ? colors.tintActive : colors.separatorColor
-							}}>
+							}}
+						>
 							<TabBarItem tab={tab} index={index} goToPage={goToPage} baseUrl={baseUrl} getCustomEmoji={getCustomEmoji} />
 						</View>
 					);

app/containers/markdown/new/OrderedList.tsx

@@ -4,20 +4,19 @@ import { OrderedList as OrderedListProps } from '@rocket.chat/message-parser';
 
 import Inline from './Inline';
 import styles from '../styles';
-import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 interface IOrderedListProps {
 	value: OrderedListProps['value'];
 }
 
-const OrderedList = ({ value }: IOrderedListProps) => {
-	const { theme } = useTheme();
+const OrderedList = ({ value }: IOrderedListProps): React.ReactElement => {
+	const { colors } = useTheme();
 	return (
 		<View>
-			{value.map((item, index) => (
-				<View style={styles.row}>
-					<Text style={[styles.text, { color: themes[theme].bodyText }]}>{index + 1}. </Text>
+			{value.map(item => (
+				<View style={styles.row} key={item.number?.toString()}>
+					<Text style={[styles.text, { color: colors.bodyText }]}>{item.number}. </Text>
 					<Inline value={item.value} />
 				</View>
 			))}