diff --git a/docusaurus/docs/React/guides/date-time-formatting.mdx b/docusaurus/docs/React/guides/date-time-formatting.mdx
index 9594093e3..a7a1666db 100644
--- a/docusaurus/docs/React/guides/date-time-formatting.mdx
+++ b/docusaurus/docs/React/guides/date-time-formatting.mdx
@@ -4,7 +4,7 @@ title: Date and time formatting
 keywords: [date, time, datetime, timestamp, format, formatting]
 ---
 
-In this guide we will learn how date a time formatting can be customized within SDK's components.
+In this guide we will learn how date and time formatting can be customized within SDK's components.
 
 ## SDK components displaying date & time
 
@@ -73,7 +73,7 @@ const CustomDateSeparator = (props: DateSeparatorProps) => (
   <DateSeparator {...props} calendar={false} format={'YYYY'} /> // calendar is enabled by default
 );
 
-const SystemMessage = (props: EventComponentProps) => (
+const CustomSystemMessage = (props: EventComponentProps) => (
   <EventComponent {...props} format={'YYYY'} /> // calendar is disabled by default
 );
 
@@ -81,13 +81,13 @@ const CustomMessageTimestamp = (props: MessageTimestampProps) => (
   <MessageTimestamp {...props} calendar={false} format={'YYYY-MM-DDTHH:mm:ss'} /> // calendar is enabled by default
 );
 
-const App = () => (
-  <Channel
-    DateSeparator={CustomDateSeparator}
-    MessageSystem={SystemMessage}
-    MessageTimestamp={CustomMessageTimestamp}
-  ></Channel>
-);
+<Channel
+  DateSeparator={CustomDateSeparator}
+  MessageSystem={SystemMessage}
+  MessageTimestamp={CustomMessageTimestamp}
+>
+  ...
+</Channel>;
 ```
 
 ### Custom formatting function