diff --git a/apps/meteor/client/views/room/composer/RoomComposer/hooks/useAutoGrow.ts b/apps/meteor/client/views/room/composer/RoomComposer/hooks/useAutoGrow.ts
index 4ce30df1bb3fc..ab2df1cd46304 100644
--- a/apps/meteor/client/views/room/composer/RoomComposer/hooks/useAutoGrow.ts
+++ b/apps/meteor/client/views/room/composer/RoomComposer/hooks/useAutoGrow.ts
@@ -14,7 +14,7 @@ const shadowStyleBase: CSSProperties = {
 
 export const useAutoGrow = (
 	ref: RefObject<HTMLTextAreaElement>,
-	shadowRef: RefObject<HTMLTextAreaElement>,
+	shadowRef: RefObject<HTMLDivElement>,
 	hideTextArea?: boolean,
 ): {
 	textAreaStyle: CSSProperties;
@@ -37,8 +37,7 @@ export const useAutoGrow = (
 		if (!textarea) {
 			return;
 		}
-
-		const handleInput = () => {
+		const updateTextareaSize = () => {
 			const { value } = textarea;
 			const { current: shadow } = shadowRef;
 			if (!shadow) {
@@ -51,10 +50,10 @@ export const useAutoGrow = (
 				.replace(/\n$/, '<br/>&nbsp;')
 				.replace(/\n/g, '<br/>');
 		};
-
-		textarea.addEventListener('input', handleInput);
+		updateTextareaSize();
+		textarea.addEventListener('input', updateTextareaSize);
 		return () => {
-			textarea.removeEventListener('input', handleInput);
+			textarea.removeEventListener('input', updateTextareaSize);
 		};
 	}, [ref, shadowRef]);
 
diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
index f7d5bfaf58e33..330fdbb8771d4 100644
--- a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
+++ b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
@@ -126,7 +126,7 @@ const MessageBox = ({
 
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const messageComposerRef = useRef<HTMLElement>(null);
-	const shadowRef = useRef(null);
+	const shadowRef = useRef<HTMLDivElement>(null);
 
 	const storageID = `messagebox_${room._id}${tmid ? `-${tmid}` : ''}`;