docs: provide guide on how to add custom data to message objects (#1918)

Author: MartinCupela

docusaurus/docs/React/assets/message-payload-custom-fields.png

@@ -5,6 +5,7 @@ title: Input Submit Handler
 ---
 
 import SubmitHandler from '../../assets/SubmitHandler.png';
+import MessageCustomPayload from '../../assets/message-payload-custom-fields.png';
 
 In this example, we demonstrate how to provide custom logic and override the [`MessageInput`](../../components/message-input-components/message-input.mdx)
 component's default submit handler function. Our custom handler function will bold any message text.
@@ -107,3 +108,42 @@ const App = () => (
 ### The Result
 
 <img src={SubmitHandler} alt='Override Submit Handler' width='700' />
+
+
+## Adding custom message data
+
+If you would like to store custom data on your message objects, you can pass additional parameters to the [`sendMessage`](../../components/contexts/channel-action-context.mdx#sendmessage) function you retrieve from `ChannelActionContext`.
+
+Now, the `overrideSubmitHandler` implementation may change as follows:
+
+```tsx
+import React from 'react';
+import {
+  ChannelHeader,
+  MessageList,
+  MessageInput,
+  Window,
+  MessageToSend,
+  useChannelActionContext,
+} from 'stream-chat-react';
+
+const ChannelInner = () => {
+  const { sendMessage } = useChannelActionContext();
+
+  const overrideSubmitHandler = (message: MessageToSend, cid: string) => {
+    sendMessage(message, { important: true });
+  };
+
+  return (
+    <Window>
+      <ChannelHeader />
+      <MessageList />
+      <MessageInput focus overrideSubmitHandler={overrideSubmitHandler}/>
+    </Window>
+  )
+}
+```
+
+In your browser's Developer tools Network tab you can now observe, that the message payload includes the custom field:
+
+<img src={MessageCustomPayload} alt={'Custom message payload'} />