diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
index 59287c595..639ddaa0a 100644
--- a/src/components/Channel/Channel.tsx
+++ b/src/components/Channel/Channel.tsx
@@ -142,6 +142,7 @@ type ChannelPropsForwardedToComponentContext = Pick<
   | 'ReactionsListModal'
   | 'SendButton'
   | 'StartRecordingAudioButton'
+  | 'TextareaComposer'
   | 'ThreadHead'
   | 'ThreadHeader'
   | 'ThreadStart'
@@ -1229,6 +1230,7 @@ const ChannelInner = (
       StartRecordingAudioButton: props.StartRecordingAudioButton,
       StopAIGenerationButton: props.StopAIGenerationButton,
       StreamedMessageText: props.StreamedMessageText,
+      TextareaComposer: props.TextareaComposer,
       ThreadHead: props.ThreadHead,
       ThreadHeader: props.ThreadHeader,
       ThreadStart: props.ThreadStart,
@@ -1291,6 +1293,7 @@ const ChannelInner = (
       props.StartRecordingAudioButton,
       props.StopAIGenerationButton,
       props.StreamedMessageText,
+      props.TextareaComposer,
       props.ThreadHead,
       props.ThreadHeader,
       props.ThreadStart,
diff --git a/src/components/Channel/__tests__/Channel.test.js b/src/components/Channel/__tests__/Channel.test.js
index fff894a09..341f51827 100644
--- a/src/components/Channel/__tests__/Channel.test.js
+++ b/src/components/Channel/__tests__/Channel.test.js
@@ -32,6 +32,7 @@ import { Thread } from '../../Thread';
 import { MessageProvider } from '../../../context';
 import { MessageActionsBox } from '../../MessageActions';
 import { DEFAULT_THREAD_PAGE_SIZE } from '../../../constants/limits';
+import { generateMessageDraft } from '../../../mock-builders/generator/messageDraft';
 
 jest.mock('../../Loading', () => ({
   LoadingErrorIndicator: jest.fn(() => <div />),
@@ -173,6 +174,9 @@ describe('Channel', () => {
       pinnedMessages,
       user,
     }));
+    jest.spyOn(channel, 'getDraft').mockResolvedValue({
+      draft: generateMessageDraft({ channel, channel_cid: channel.cid }),
+    });
   });
 
   afterEach(() => {
diff --git a/src/components/MessageInput/EditMessageForm.tsx b/src/components/MessageInput/EditMessageForm.tsx
index 072bf224a..6e5bda7f2 100644
--- a/src/components/MessageInput/EditMessageForm.tsx
+++ b/src/components/MessageInput/EditMessageForm.tsx
@@ -86,7 +86,6 @@ export const EditMessageModal = ({
     >
       <MessageInput
         clearEditingState={clearEditingState}
-        grow
         hideSendButton
         Input={EditMessageInput}
         {...additionalMessageInputProps}
diff --git a/src/components/MessageInput/MessageInput.tsx b/src/components/MessageInput/MessageInput.tsx
index 7631c1013..cef7dae00 100644
--- a/src/components/MessageInput/MessageInput.tsx
+++ b/src/components/MessageInput/MessageInput.tsx
@@ -38,7 +38,7 @@ export type MessageInputProps = {
    */
   additionalTextareaProps?: Omit<
     React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    'defaultValue'
+    'defaultValue' | 'style' | 'disabled' | 'value'
   >;
   /**
    * When enabled, recorded messages won’t be sent immediately.
@@ -55,8 +55,6 @@ export type MessageInputProps = {
   emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
   /** If true, focuses the text input on component mount */
   focus?: boolean;
-  /** If true, expands the text input vertically for new lines */
-  grow?: boolean;
   /** Allows to hide MessageInput's send button. */
   hideSendButton?: boolean;
   /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
diff --git a/src/components/MessageInput/MessageInputFlat.tsx b/src/components/MessageInput/MessageInputFlat.tsx
index 93eca9928..21f9bf154 100644
--- a/src/components/MessageInput/MessageInputFlat.tsx
+++ b/src/components/MessageInput/MessageInputFlat.tsx
@@ -19,7 +19,7 @@ import {
   QuotedMessagePreviewHeader,
 } from './QuotedMessagePreview';
 import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
-import { TextareaComposer } from '../TextareaComposer';
+import { TextareaComposer as DefaultTextareaComposer } from '../TextareaComposer';
 import { AIStates, useAIState } from '../AIStateIndicator';
 import { RecordingAttachmentType } from '../MediaRecorder/classes';
 
@@ -53,7 +53,8 @@ export const MessageInputFlat = () => {
     SendButton = DefaultSendButton,
     StartRecordingAudioButton = DefaultStartRecordingAudioButton,
     StopAIGenerationButton: StopAIGenerationButtonOverride,
-  } = useComponentContext('MessageInputFlat');
+    TextareaComposer = DefaultTextareaComposer,
+  } = useComponentContext();
   const { channel } = useChatContext('MessageInputFlat');
   const { aiState } = useAIState(channel);
 
diff --git a/src/components/MessageInput/hooks/useCreateMessageInputContext.ts b/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
index c31522353..e5f4e2513 100644
--- a/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
+++ b/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
@@ -12,10 +12,8 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
     cooldownRemaining,
     emojiSearchIndex,
     focus,
-    grow,
     handleSubmit,
     hideSendButton,
-    insertText,
     isThreadInput,
     maxRows,
     minRows,
@@ -39,10 +37,8 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
       cooldownRemaining,
       emojiSearchIndex,
       focus,
-      grow,
       handleSubmit,
       hideSendButton,
-      insertText,
       isThreadInput,
       maxRows,
       minRows,
diff --git a/src/components/MessageInput/hooks/useMessageInputControls.ts b/src/components/MessageInput/hooks/useMessageInputControls.ts
index 212af9fa7..8f1382d99 100644
--- a/src/components/MessageInput/hooks/useMessageInputControls.ts
+++ b/src/components/MessageInput/hooks/useMessageInputControls.ts
@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useMessageInputText } from './useMessageInputText';
+import { useTextareaRef } from './useTextareaRef';
 import { useSubmitHandler } from './useSubmitHandler';
 import { usePasteHandler } from './usePasteHandler';
 import { useMediaRecorder } from '../../MediaRecorder/hooks/useMediaRecorder';
@@ -12,7 +12,6 @@ export type MessageInputHookProps = {
     event?: React.BaseSyntheticEvent,
     customMessageData?: Omit<UpdatedMessage, 'mentioned_users'>,
   ) => void;
-  insertText: (textToInsert: string) => void;
   onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
   recordingController: RecordingController;
   textareaRef: React.MutableRefObject<HTMLTextAreaElement | null | undefined>;
@@ -24,7 +23,7 @@ export const useMessageInputControls = (
   const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } =
     props;
 
-  const { insertText, textareaRef } = useMessageInputText(props);
+  const { textareaRef } = useTextareaRef(props);
 
   const { handleSubmit } = useSubmitHandler(props);
 
@@ -35,11 +34,10 @@ export const useMessageInputControls = (
     recordingConfig: audioRecordingConfig,
   });
 
-  const { onPaste } = usePasteHandler(insertText);
+  const { onPaste } = usePasteHandler();
 
   return {
     handleSubmit,
-    insertText,
     onPaste,
     recordingController,
     textareaRef,
diff --git a/src/components/MessageInput/hooks/useMessageInputText.ts b/src/components/MessageInput/hooks/useMessageInputText.ts
deleted file mode 100644
index 1d184d05e..000000000
--- a/src/components/MessageInput/hooks/useMessageInputText.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { type TextComposerState } from 'stream-chat';
-import type { MessageInputProps } from '../MessageInput';
-
-import { useMessageComposer } from './useMessageComposer';
-import { useStateStore } from '../../../store';
-
-const messageComposerStateSelector = (state: TextComposerState) => ({
-  text: state.text,
-});
-
-export const useMessageInputText = (props: MessageInputProps) => {
-  const { focus } = props;
-  const messageComposer = useMessageComposer();
-  const textareaRef = useRef<HTMLTextAreaElement>(undefined);
-  const { text } = useStateStore(
-    messageComposer.textComposer.state,
-    messageComposerStateSelector,
-  );
-  // Focus
-  useEffect(() => {
-    if (focus && textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, [focus]);
-
-  // Text + cursor position
-  const newCursorPosition = useRef<number>(undefined);
-
-  const insertText = useCallback(
-    (textToInsert: string) => {
-      const selection = textareaRef?.current && {
-        end: textareaRef.current.selectionEnd,
-        start: textareaRef.current.selectionStart,
-      };
-      messageComposer.textComposer.insertText({
-        selection,
-        text: textToInsert,
-      });
-      if (selection) newCursorPosition.current = selection.start + textToInsert.length;
-    },
-    [messageComposer, newCursorPosition, textareaRef],
-  );
-
-  useEffect(() => {
-    const textareaElement = textareaRef.current;
-    if (textareaElement && newCursorPosition.current !== undefined) {
-      textareaElement.selectionStart = newCursorPosition.current;
-      textareaElement.selectionEnd = newCursorPosition.current;
-      newCursorPosition.current = undefined;
-    }
-  }, [text, newCursorPosition]);
-
-  return {
-    insertText,
-    textareaRef,
-  };
-};
diff --git a/src/components/MessageInput/hooks/usePasteHandler.ts b/src/components/MessageInput/hooks/usePasteHandler.ts
index 7ab87bb38..b35dbd48f 100644
--- a/src/components/MessageInput/hooks/usePasteHandler.ts
+++ b/src/components/MessageInput/hooks/usePasteHandler.ts
@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 import { useMessageComposer } from './useMessageComposer';
 import { dataTransferItemsToFiles } from '../../ReactFileUtilities';
 
-export const usePasteHandler = (insertText: (textToInsert: string) => void) => {
-  const { attachmentManager } = useMessageComposer();
+export const usePasteHandler = () => {
+  const { attachmentManager, textComposer } = useMessageComposer();
   const onPaste = useCallback(
     (clipboardEvent: React.ClipboardEvent<HTMLTextAreaElement>) => {
       (async (event) => {
@@ -29,13 +29,13 @@ export const usePasteHandler = (insertText: (textToInsert: string) => void) => {
 
         if (plainTextPromise) {
           const pastedText = await plainTextPromise;
-          insertText(pastedText);
+          textComposer.insertText({ text: pastedText });
         } else {
           attachmentManager.uploadFiles(fileLikes);
         }
       })(clipboardEvent);
     },
-    [attachmentManager, insertText],
+    [attachmentManager, textComposer],
   );
 
   return { onPaste };
diff --git a/src/components/MessageInput/hooks/useTextareaRef.ts b/src/components/MessageInput/hooks/useTextareaRef.ts
new file mode 100644
index 000000000..dd70d7659
--- /dev/null
+++ b/src/components/MessageInput/hooks/useTextareaRef.ts
@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import type { MessageInputProps } from '../MessageInput';
+
+export const useTextareaRef = (props: MessageInputProps) => {
+  const { focus } = props;
+  const textareaRef = useRef<HTMLTextAreaElement>(undefined);
+  // Focus
+  useEffect(() => {
+    if (focus && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [focus]);
+
+  return {
+    textareaRef,
+  };
+};
diff --git a/src/components/TextareaComposer/TextareaComposer.tsx b/src/components/TextareaComposer/TextareaComposer.tsx
index 8543e10a2..1d465f5a5 100644
--- a/src/components/TextareaComposer/TextareaComposer.tsx
+++ b/src/components/TextareaComposer/TextareaComposer.tsx
@@ -1,5 +1,12 @@
+import debounce from 'lodash.debounce';
 import clsx from 'clsx';
-import type { ChangeEventHandler, TextareaHTMLAttributes, UIEventHandler } from 'react';
+import type {
+  ChangeEventHandler,
+  SyntheticEvent,
+  TextareaHTMLAttributes,
+  UIEventHandler,
+} from 'react';
+import { useMemo } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Textarea from 'react-textarea-autosize';
 import { useMessageComposer } from '../MessageInput';
@@ -40,17 +47,15 @@ const configStateSelector = (state: MessageComposerConfig) => ({
 const defaultShouldSubmit = (event: React.KeyboardEvent<HTMLTextAreaElement>) =>
   event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
 
-export type TextComposerProps = Omit<
+export type TextareaComposerProps = Omit<
   TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'style' | 'defaultValue' | 'disabled'
+  'style' | 'defaultValue' | 'disabled' | 'value'
 > & {
   closeSuggestionsOnClickOutside?: boolean;
   containerClassName?: string;
-  dropdownClassName?: string;
-  grow?: boolean;
-  itemClassName?: string;
   listClassName?: string;
   maxRows?: number;
+  minRows?: number;
   shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
 };
 
@@ -58,34 +63,33 @@ export const TextareaComposer = ({
   className,
   closeSuggestionsOnClickOutside,
   containerClassName,
-  // dropdownClassName, // todo: X find a different way to prevent prop drilling
-  grow: growProp,
-  // itemClassName, // todo: X find a different way to prevent prop drilling
   listClassName,
   maxRows: maxRowsProp = 1,
+  minRows: minRowsProp,
   onBlur,
   onChange,
   onKeyDown,
   onScroll,
+  onSelect,
   placeholder: placeholderProp,
   shouldSubmit: shouldSubmitProp,
-  ...restProps
-}: TextComposerProps) => {
+  ...restTextareaProps
+}: TextareaComposerProps) => {
   const { t } = useTranslationContext();
   const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();
   const {
     additionalTextareaProps,
     cooldownRemaining,
-    grow: growContext,
     handleSubmit,
     maxRows: maxRowsContext,
+    minRows: minRowsContext,
     onPaste,
     shouldSubmit: shouldSubmitContext,
     textareaRef,
   } = useMessageInputContext();
 
-  const grow = growProp ?? growContext;
   const maxRows = maxRowsProp ?? maxRowsContext;
+  const minRows = minRowsProp ?? minRowsContext;
   const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
   const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
 
@@ -205,6 +209,22 @@ export const TextareaComposer = ({
     [onScroll, textComposer],
   );
 
+  const setSelectionDebounced = useMemo(
+    () =>
+      debounce(
+        (e: SyntheticEvent<HTMLTextAreaElement>) => {
+          onSelect?.(e);
+          textComposer.setSelection({
+            end: (e.target as HTMLTextAreaElement).selectionEnd,
+            start: (e.target as HTMLTextAreaElement).selectionStart,
+          });
+        },
+        100,
+        { leading: false, trailing: true },
+      ),
+    [onSelect, textComposer],
+  );
+
   useEffect(() => {
     // FIXME: find the real reason for cursor being set to the end on each change
     // This is a workaround to prevent the cursor from jumping
@@ -235,7 +255,7 @@ export const TextareaComposer = ({
       ref={containerRef}
     >
       <Textarea
-        {...restProps}
+        {...{ ...additionalTextareaProps, ...restTextareaProps }}
         aria-label={cooldownRemaining ? t('Slow Mode ON') : placeholder}
         className={clsx(
           'rta__textarea',
@@ -244,7 +264,8 @@ export const TextareaComposer = ({
         )}
         data-testid='message-input'
         disabled={!enabled || !!cooldownRemaining}
-        maxRows={grow ? maxRows : 1}
+        maxRows={maxRows}
+        minRows={minRows}
         onBlur={onBlur}
         onChange={changeHandler}
         onCompositionEnd={onCompositionEnd}
@@ -252,6 +273,7 @@ export const TextareaComposer = ({
         onKeyDown={keyDownHandler}
         onPaste={onPaste}
         onScroll={scrollHandler}
+        onSelect={setSelectionDebounced}
         placeholder={placeholder || t('Type your message')}
         ref={(ref) => {
           textareaRef.current = ref;
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index 9e6cc1f64..9b34e728a 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -40,6 +40,7 @@ import type {
   SendButtonProps,
   StartRecordingAudioButtonProps,
   StreamedMessageTextProps,
+  TextareaComposerProps,
   ThreadHeaderProps,
   ThreadListItemProps,
   ThreadListItemUIProps,
@@ -199,6 +200,8 @@ export type ComponentContextValue = {
   StartRecordingAudioButton?: React.ComponentType<StartRecordingAudioButtonProps>;
   StopAIGenerationButton?: React.ComponentType<StopAIGenerationButtonProps> | null;
   StreamedMessageText?: React.ComponentType<StreamedMessageTextProps>;
+  /** Custom UI component to handle message text input, defaults to and accepts same props as [TextareaComposer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/TextareaComposer.tsx) */
+  TextareaComposer?: React.ComponentType<TextareaComposerProps>;
   /** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
   ThreadHead?: React.ComponentType<MessageProps>;
   /** Custom UI component to display the header of a `Thread`, defaults to and accepts same props as: [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
@@ -213,8 +216,6 @@ export type ComponentContextValue = {
   ThreadStart?: React.ComponentType;
   /** Custom UI component to display a date used in timestamps. It's used internally by the default `MessageTimestamp`, and to display a timestamp for edited messages. */
   Timestamp?: React.ComponentType<TimestampProps>;
-  /** Optional context provider that lets you override the default autocomplete triggers, defaults to: [DefaultTriggerProvider](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/DefaultTriggerProvider.tsx) */
-  TriggerProvider?: React.ComponentType;
   /** Custom UI component for the typing indicator, defaults to and accepts same props as: [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) */
   TypingIndicator?: React.ComponentType<TypingIndicatorProps>;
   /** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */
diff --git a/src/plugins/Emojis/EmojiPicker.tsx b/src/plugins/Emojis/EmojiPicker.tsx
index 0915c3975..e0da70800 100644
--- a/src/plugins/Emojis/EmojiPicker.tsx
+++ b/src/plugins/Emojis/EmojiPicker.tsx
@@ -4,8 +4,9 @@ import Picker from '@emoji-mart/react';
 
 import type { Options } from '@popperjs/core';
 
-import { useMessageInputContext, useTranslationContext } from '../../context';
 import { EmojiPickerIcon } from './icons';
+import { useMessageInputContext, useTranslationContext } from '../../context';
+import { useMessageComposer } from '../../components';
 
 const isShadowRoot = (node: Node): node is ShadowRoot => !!(node as ShadowRoot).host;
 
@@ -35,7 +36,8 @@ const classNames: EmojiPickerProps = {
 
 export const EmojiPicker = (props: EmojiPickerProps) => {
   const { t } = useTranslationContext('EmojiPicker');
-  const { insertText, textareaRef } = useMessageInputContext('EmojiPicker');
+  const { textareaRef } = useMessageInputContext('EmojiPicker');
+  const { textComposer } = useMessageComposer();
   const [displayPicker, setDisplayPicker] = useState(false);
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(
     null,
@@ -84,8 +86,10 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
           <Picker
             data={async () => (await import('@emoji-mart/data')).default}
             onEmojiSelect={(e: { native: string }) => {
-              insertText(e.native);
-              textareaRef.current?.focus();
+              const textarea = textareaRef.current;
+              if (!textarea) return;
+              textComposer.insertText({ text: e.native });
+              textarea.focus();
               if (props.closeOnEmojiSelect) {
                 setDisplayPicker(false);
               }
diff --git a/src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts b/src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
index e8423192b..baae9a4d3 100644
--- a/src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
+++ b/src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
@@ -1,9 +1,10 @@
 import mergeWith from 'lodash.mergewith';
 import type {
+  Middleware,
   SearchSourceOptions,
   SearchSourceType,
+  TextComposerMiddlewareExecutorState,
   TextComposerMiddlewareOptions,
-  TextComposerMiddlewareParams,
   TextComposerSuggestion,
 } from 'stream-chat';
 import {
@@ -18,6 +19,9 @@ import type {
   EmojiSearchIndexResult,
 } from '../../../components/MessageInput';
 
+export type EmojiSuggestion<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> =
+  TextComposerSuggestion<T>;
+
 class EmojiSearchSource<
   T extends TextComposerSuggestion<EmojiSearchIndexResult>,
 > extends BaseSearchSource<T> {
@@ -67,6 +71,12 @@ class EmojiSearchSource<
 
 const DEFAULT_OPTIONS: TextComposerMiddlewareOptions = { minChars: 1, trigger: ':' };
 
+export type EmojiMiddleware<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> =
+  Middleware<
+    TextComposerMiddlewareExecutorState<EmojiSuggestion<T>>,
+    'onChange' | 'onSuggestionItemSelect'
+  >;
+
 /**
  * TextComposer middleware for mentions
  * Usage:
@@ -84,102 +94,90 @@ const DEFAULT_OPTIONS: TextComposerMiddlewareOptions = { minChars: 1, trigger: '
  *   }} options
  * @returns
  */
-export const createTextComposerEmojiMiddleware = <
-  T extends EmojiSearchIndexResult = EmojiSearchIndexResult,
->(
+export const createTextComposerEmojiMiddleware = (
   emojiSearchIndex: EmojiSearchIndex,
   options?: Partial<TextComposerMiddlewareOptions>,
-) => {
+): EmojiMiddleware => {
   const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});
   const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);
   emojiSearchSource.activate();
 
   return {
     id: 'stream-io/emoji-middleware',
-    onChange: async ({ input, nextHandler }: TextComposerMiddlewareParams<T>) => {
-      const { state } = input;
-      if (!state.selection) return nextHandler(input);
-
-      const triggerWithToken = getTriggerCharWithToken({
-        acceptTrailingSpaces: false,
-        text: state.text.slice(0, state.selection.end),
-        trigger: finalOptions.trigger,
-      });
-
-      const triggerWasRemoved =
-        !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
-
-      if (triggerWasRemoved) {
-        const hasSuggestionsForTrigger =
-          input.state.suggestions?.trigger === finalOptions.trigger;
-        const newInput = { ...input };
-        if (hasSuggestionsForTrigger && newInput.state.suggestions) {
-          delete newInput.state.suggestions;
+    // eslint-disable-next-line sort-keys
+    handlers: {
+      onChange: async ({ complete, forward, next, state }) => {
+        if (!state.selection) return forward();
+
+        const triggerWithToken = getTriggerCharWithToken({
+          acceptTrailingSpaces: false,
+          text: state.text.slice(0, state.selection.end),
+          trigger: finalOptions.trigger,
+        });
+
+        const triggerWasRemoved =
+          !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
+
+        if (triggerWasRemoved) {
+          const hasSuggestionsForTrigger =
+            state.suggestions?.trigger === finalOptions.trigger;
+          const newState = { ...state };
+          if (hasSuggestionsForTrigger && newState.suggestions) {
+            delete newState.suggestions;
+          }
+          return next(newState);
         }
-        return nextHandler(newInput);
-      }
 
-      const newSearchTriggerred =
-        triggerWithToken && triggerWithToken === finalOptions.trigger;
+        const newSearchTriggerred =
+          triggerWithToken && triggerWithToken === finalOptions.trigger;
 
-      if (newSearchTriggerred) {
-        emojiSearchSource.resetStateAndActivate();
-      }
+        if (newSearchTriggerred) {
+          emojiSearchSource.resetStateAndActivate();
+        }
 
-      const textWithReplacedWord = await replaceWordWithEntity({
-        caretPosition: state.selection.end,
-        getEntityString: async (word: string) => {
-          const { items } = await emojiSearchSource.query(word);
+        const textWithReplacedWord = await replaceWordWithEntity({
+          caretPosition: state.selection.end,
+          getEntityString: async (word: string) => {
+            const { items } = await emojiSearchSource.query(word);
 
-          const emoji = items
-            .filter(Boolean)
-            .slice(0, 10)
-            .find(({ emoticons }) => !!emoticons?.includes(word));
+            const emoji = items
+              .filter(Boolean)
+              .slice(0, 10)
+              .find(({ emoticons }) => !!emoticons?.includes(word));
 
-          if (!emoji) return null;
+            if (!emoji) return null;
 
-          const [firstSkin] = emoji.skins ?? [];
+            const [firstSkin] = emoji.skins ?? [];
 
-          return emoji.native ?? firstSkin.native;
-        },
-        text: state.text,
-      });
+            return emoji.native ?? firstSkin.native;
+          },
+          text: state.text,
+        });
 
-      if (textWithReplacedWord !== state.text) {
-        return {
-          state: {
+        if (textWithReplacedWord !== state.text) {
+          return complete({
             ...state,
             suggestions: undefined, // to prevent the TextComposerMiddlewareExecutor to run the first page query
             text: textWithReplacedWord,
-          },
-          stop: true, // Stop other middleware from processing '@' character
-        };
-      }
+          });
+        }
 
-      return {
-        state: {
+        return complete({
           ...state,
           suggestions: {
             query: triggerWithToken.slice(1),
             searchSource: emojiSearchSource,
             trigger: finalOptions.trigger,
           },
-        },
-        stop: true, // Stop other middleware from processing '@' character
-      };
-    },
-    onSuggestionItemSelect: ({
-      input,
-      nextHandler,
-      selectedSuggestion,
-    }: TextComposerMiddlewareParams<T>) => {
-      const { state } = input;
-      if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
-        return nextHandler(input);
-
-      emojiSearchSource.resetStateAndActivate();
-      return Promise.resolve({
-        state: {
+        });
+      },
+      onSuggestionItemSelect: ({ complete, forward, state }) => {
+        const { selectedSuggestion } = state.change ?? {};
+        if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
+          return forward();
+
+        emojiSearchSource.resetStateAndActivate();
+        return complete({
           ...state,
           ...insertItemWithTrigger({
             insertText: `${'native' in selectedSuggestion ? selectedSuggestion.native : ''} `,
@@ -188,8 +186,8 @@ export const createTextComposerEmojiMiddleware = <
             trigger: finalOptions.trigger,
           }),
           suggestions: undefined, // Clear suggestions after selection
-        },
-      });
+        });
+      },
     },
   };
 };