diff --git a/docusaurus/docs/React/guides/date-time-formatting.mdx b/docusaurus/docs/React/guides/date-time-formatting.mdx
index bb53adfef..861ff9f7e 100644
--- a/docusaurus/docs/React/guides/date-time-formatting.mdx
+++ b/docusaurus/docs/React/guides/date-time-formatting.mdx
@@ -132,22 +132,24 @@ import {
 } from 'stream-chat-react';
 
 const CustomDateSeparator = (props: DateSeparatorProps) => (
-  <DateSeparator {...props} calendar={null} calendarFormats={null} format={null} />
+  <DateSeparator {...props} calendar={null} /> // calendarFormats, neither format have default value
 );
 
 const SystemMessage = (props: EventComponentProps) => (
-  <EventComponent {...props} calendar={null} calendarFormats={null} format={null} />
+  <EventComponent {...props} format={null} /> // calendar  neither calendarFormats have default value
 );
 
 const CustomMessageTimestamp = (props: MessageTimestampProps) => (
-  <MessageTimestamp {...props} calendar={null} calendarFormats={null} format={null} />
+  <MessageTimestamp {...props} calendar={null} format={null} /> // calendarFormats do not have default value
 );
 ```
 
 Now we can apply custom configuration in all the translation JSON files. It could look similar to the following example key-value pair.
 
-```
-"timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: YYYY) }}",
+```json
+{
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: YYYY) }}"
+}
 ```
 
 Besides overriding the formatting parameters above, we can customize the translation key via `timestampTranslationKey` prop all the above components (`DateSeparator`, `EventComponent`, `MessageTimestamp`).
@@ -165,13 +167,14 @@ const CustomMessageTimestamp = (props: MessageTimestampProps) => (
 Once the default prop values are nullified, we override the default formatting rules in the JSON translation value. We can take a look at an example of German translation for SystemMessage:
 
 ```
-"timestamp/SystemMessage": "{{ timestamp, timestampFormatter(calendar: true; calendarFormats: {\"lastDay\": \"[gestern um] LT\", \"lastWeek\": \"[letzten] dddd [um] LT\", \"nextDay\": \"[morgen um] LT\", \"nextWeek\": \"dddd [um] LT\", \"sameDay\": \"[heute um] LT\", \"sameElse\": \"L\"}) }}",
+"timestamp/SystemMessage": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\": \"[gestern um] LT\", \"lastWeek\": \"[letzten] dddd [um] LT\", \"nextDay\": \"[morgen um] LT\", \"nextWeek\": \"dddd [um] LT\", \"sameDay\": \"[heute um] LT\", \"sameElse\": \"L\"}) }}",
 ```
 
 Let's dissect the example:
 
 - The curly brackets (`{{`, `}}`) indicate the place where a value will be interpolated (inserted) into the string.
 - variable `timestamp` is the name of variable which value will be inserted into the string
+- value separator `|` signals the separation between the interpolated value and the formatting function name
 - `timestampFormatter` is the name of the formatting function that is used to convert the `timestamp` value into desired format
 - the `timestampFormatter` is can be passed the same parameters as the React components (`calendar`, `calendarFormats`, `format`) as if the function was called with these values. The values can be simple scalar values as well as objects (note `calendarFormats` should be an object)
 
diff --git a/src/i18n/Streami18n.ts b/src/i18n/Streami18n.ts
index 6494e1f4d..f0934bac8 100644
--- a/src/i18n/Streami18n.ts
+++ b/src/i18n/Streami18n.ts
@@ -467,7 +467,7 @@ export class Streami18n {
   i18nextConfig: {
     debug: boolean;
     fallbackLng: false;
-    interpolation: { escapeValue: boolean };
+    interpolation: { escapeValue: boolean; formatSeparator: string };
     keySeparator: false;
     lng: string;
     nsSeparator: false;
@@ -554,7 +554,7 @@ export class Streami18n {
     this.i18nextConfig = {
       debug: finalOptions.debug,
       fallbackLng: false,
-      interpolation: { escapeValue: false },
+      interpolation: { escapeValue: false, formatSeparator: '|' },
       keySeparator: false,
       lng: this.currentLanguage,
       nsSeparator: false,
diff --git a/src/i18n/__tests__/Streami18n.test.js b/src/i18n/__tests__/Streami18n.test.js
index 3656db86f..99db652bd 100644
--- a/src/i18n/__tests__/Streami18n.test.js
+++ b/src/i18n/__tests__/Streami18n.test.js
@@ -271,7 +271,7 @@ describe('Streami18n timezone', () => {
       it('allows to override the default timestampFormatter', async () => {
         const i18n = new Streami18n({
           formatters: { timestampFormatter: (s) => () => 'custom' },
-          translationsForLanguage: { abc: '{{ value, timestampFormatter }}' },
+          translationsForLanguage: { abc: '{{ value | timestampFormatter }}' },
         });
         await i18n.init();
         expect(i18n.t('abc')).toBe('custom');
@@ -279,7 +279,7 @@ describe('Streami18n timezone', () => {
       it('allows to add new custom formatter', async () => {
         const i18n = new Streami18n({
           formatters: { customFormatter: (s) => () => 'custom' },
-          translationsForLanguage: { abc: '{{ value, customFormatter }}' },
+          translationsForLanguage: { abc: '{{ value | customFormatter }}' },
         });
         await i18n.init();
         expect(i18n.t('abc')).toBe('custom');
diff --git a/src/i18n/de.json b/src/i18n/de.json
index 64abff745..2f363c938 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -122,9 +122,9 @@
   "searchResultsCount_one": "1 Ergebnis",
   "searchResultsCount_other": "{{ count }} Ergebnisse",
   "this content could not be displayed": "Dieser Inhalt konnte nicht angezeigt werden",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@Benutzername]",
   "unban-command-description": "Einen Benutzer entbannen",
   "unmute-command-args": "[@Benutzername]",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 34e782304..1608525e9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -116,9 +116,9 @@
   "searchResultsCount_one": "1 result",
   "searchResultsCount_other": "{{ count }} results",
   "this content could not be displayed": "this content could not be displayed",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unreadMessagesSeparatorText_one": "1 unread message",
   "unreadMessagesSeparatorText_other": "{{count}} unread messages",
   "{{ commaSeparatedUsers }} and {{ moreCount }} more": "{{ commaSeparatedUsers }} and {{ moreCount }} more",
diff --git a/src/i18n/es.json b/src/i18n/es.json
index 2103d5699..30817442a 100644
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@@ -124,9 +124,9 @@
   "searchResultsCount_one": "1 resultado",
   "searchResultsCount_other": "{{ count }} resultados",
   "this content could not be displayed": "este contenido no se pudo mostrar",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@usuario]",
   "unban-command-description": "Quitar la prohibición a un usuario",
   "unmute-command-args": "[@usuario]",
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index dd1f35978..cfa4233c8 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -124,9 +124,9 @@
   "searchResultsCount_one": "1 résultat",
   "searchResultsCount_other": "{{ count }} résultats",
   "this content could not be displayed": "ce contenu n'a pu être affiché",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@nomdutilisateur]",
   "unban-command-description": "Débannir un utilisateur",
   "unmute-command-args": "[@nomdutilisateur]",
diff --git a/src/i18n/hi.json b/src/i18n/hi.json
index 20745b469..0556d7f8e 100644
--- a/src/i18n/hi.json
+++ b/src/i18n/hi.json
@@ -123,9 +123,9 @@
   "searchResultsCount_one": "1 परिणाम",
   "searchResultsCount_other": "{{ count }} परिणाम",
   "this content could not be displayed": "यह कॉन्टेंट लोड नहीं हो पाया",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@उपयोगकर्तनाम]",
   "unban-command-description": "एक उपयोगकर्ता को प्रतिषेध से मुक्त करें",
   "unmute-command-args": "[@उपयोगकर्तनाम]",
diff --git a/src/i18n/it.json b/src/i18n/it.json
index d65d56dc2..1ead90530 100644
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@@ -124,9 +124,9 @@
   "searchResultsCount_one": "1 risultato",
   "searchResultsCount_other": "{{ count }} risultati",
   "this content could not be displayed": "questo contenuto non puó essere mostrato",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@nomeutente]",
   "unban-command-description": "Togliere il divieto a un utente",
   "unmute-command-args": "[@nomeutente]",
diff --git a/src/i18n/ja.json b/src/i18n/ja.json
index 64f9ee01f..d4189e27a 100644
--- a/src/i18n/ja.json
+++ b/src/i18n/ja.json
@@ -122,9 +122,9 @@
   "searchResultsCount_one": "1件の結果",
   "searchResultsCount_other": "{{ count }}件の結果",
   "this content could not be displayed": "このコンテンツは表示できませんでした",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@ユーザ名]",
   "unban-command-description": "ユーザーの禁止を解除する",
   "unmute-command-args": "[@ユーザ名]",
diff --git a/src/i18n/ko.json b/src/i18n/ko.json
index ab3868e4b..50c8f5deb 100644
--- a/src/i18n/ko.json
+++ b/src/i18n/ko.json
@@ -122,9 +122,9 @@
   "searchResultsCount_one": "1개의 결과",
   "searchResultsCount_other": "{{ count }}개 결과",
   "this content could not be displayed": "이 콘텐츠를 표시할 수 없습니다",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@사용자이름]",
   "unban-command-description": "사용자 차단 해제",
   "unmute-command-args": "[@사용자이름]",
diff --git a/src/i18n/nl.json b/src/i18n/nl.json
index b9053aee6..2635672c1 100644
--- a/src/i18n/nl.json
+++ b/src/i18n/nl.json
@@ -122,9 +122,9 @@
   "searchResultsCount_one": "1 resultaat",
   "searchResultsCount_other": "{{ count }} resultaten",
   "this content could not be displayed": "Deze inhoud kan niet weergegeven worden",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@gebruikersnaam]",
   "unban-command-description": "Een gebruiker debannen",
   "unmute-command-args": "[@gebruikersnaam]",
diff --git a/src/i18n/pt.json b/src/i18n/pt.json
index 15b6b4889..b2d4a51a9 100644
--- a/src/i18n/pt.json
+++ b/src/i18n/pt.json
@@ -124,9 +124,9 @@
   "searchResultsCount_one": "1 resultado",
   "searchResultsCount_other": "{{ count }} resultados",
   "this content could not be displayed": "este conteúdo não pôde ser exibido",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@nomedeusuário]",
   "unban-command-description": "Desbanir um usuário",
   "unmute-command-args": "[@nomedeusuário]",
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
index 2492ba1b1..b1512219a 100644
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@@ -126,9 +126,9 @@
   "searchResultsCount_one": "1 результат",
   "searchResultsCount_other": "{{ count }} результатов",
   "this content could not be displayed": "Этот контент не может быть отображен в данный момент",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@имяпользователя]",
   "unban-command-description": "Разблокировать пользователя",
   "unmute-command-args": "[@имяпользователя]",
diff --git a/src/i18n/tr.json b/src/i18n/tr.json
index 158d89bd4..ca3397f75 100644
--- a/src/i18n/tr.json
+++ b/src/i18n/tr.json
@@ -122,9 +122,9 @@
   "searchResultsCount_one": "1 sonuç",
   "searchResultsCount_other": "{{ count }} sonuç",
   "this content could not be displayed": "bu içerik gösterilemiyor",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@kullanıcıadı]",
   "unban-command-description": "Bir kullanıcının yasağını kaldır",
   "unmute-command-args": "[@kullanıcıadı]",