diff --git a/src/hooks/VoicePlayer/index.tsx b/src/hooks/VoicePlayer/index.tsx
index 1047db4d9..61b7705d5 100644
--- a/src/hooks/VoicePlayer/index.tsx
+++ b/src/hooks/VoicePlayer/index.tsx
@@ -73,20 +73,23 @@ export const VoicePlayerProvider = ({
     }
   };
 
-  const pause = (groupKey: string | null) => {
-    if (currentGroupKey === groupKey && currentPlayer !== null) {
-      logger.info('VoicePlayer: Pause playing(by group key).');
-      currentPlayer?.pause();
-    }
-    if (groupKey === ALL) {
-      logger.info('VoicePlayer: Pause playing(all).');
-      currentPlayer?.pause();
+  const pause = (groupKey?: string) => {
+    if (currentPlayer) {
+      if (groupKey === currentGroupKey) {
+        logger.info('VoicePlayer: Pause playing(by group key).');
+        currentPlayer.pause();
+      } else if (groupKey === ALL) {
+        logger.info('VoicePlayer: Pause playing(all).');
+        currentPlayer.pause();
+      }
+    } else {
+      logger.warning('VoicePlayer: No currentPlayer to pause.');
     }
   };
 
   const play = ({
     groupKey,
-    audioFile = null,
+    audioFile,
     audioFileUrl = '',
   }: VoicePlayerPlayProps): void => {
     if (groupKey !== currentGroupKey) {
@@ -96,7 +99,7 @@ export const VoicePlayerProvider = ({
     // Clear the previous AudioPlayer element
     const voicePlayerRoot = document.getElementById(VOICE_PLAYER_ROOT_ID);
     const voicePlayerAudioElement = document.getElementById(VOICE_PLAYER_AUDIO_ID);
-    if (voicePlayerAudioElement) {
+    if (voicePlayerRoot && voicePlayerAudioElement) {
       voicePlayerRoot.removeChild(voicePlayerAudioElement);
     }
 
diff --git a/src/hooks/VoicePlayer/useVoicePlayer.tsx b/src/hooks/VoicePlayer/useVoicePlayer.tsx
index 77b9151d5..98f33dbd5 100644
--- a/src/hooks/VoicePlayer/useVoicePlayer.tsx
+++ b/src/hooks/VoicePlayer/useVoicePlayer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useVoicePlayerContext } from '.';
 import { VOICE_PLAYER_AUDIO_ID } from '../../utils/consts';
 import { useVoiceRecorderContext } from '../VoiceRecorder';
@@ -7,8 +7,8 @@ import { AudioUnitDefaultValue, VoicePlayerStatusType } from './dux/initialState
 import { generateGroupKey } from './utils';
 
 export interface UseVoicePlayerProps {
-  key: string;
-  channelUrl: string;
+  key?: string;
+  channelUrl?: string;
   audioFile?: File;
   audioFileUrl?: string;
 }
@@ -25,10 +25,10 @@ export interface UseVoicePlayerContext {
 export const useVoicePlayer = ({
   key = '',
   channelUrl = '',
-  audioFile = null,
+  audioFile,
   audioFileUrl = '',
 }: UseVoicePlayerProps): UseVoicePlayerContext => {
-  const [groupKey] = useState<string>(generateGroupKey(channelUrl, key));
+  const groupKey = generateGroupKey(channelUrl, key);
   const {
     play,
     pause,
diff --git a/src/hooks/VoiceRecorder/WebAudioUtils.ts b/src/hooks/VoiceRecorder/WebAudioUtils.ts
index 8f23c4f26..3b1f228a3 100644
--- a/src/hooks/VoiceRecorder/WebAudioUtils.ts
+++ b/src/hooks/VoiceRecorder/WebAudioUtils.ts
@@ -1,8 +1,9 @@
 // Thanks to https://codesandbox.io/s/media-recorder-api-downsampling-16k-mp3-encode-using-lame-js-forked-n1pblw
 import { VOICE_RECORDER_AUDIO_SAMPLE_RATE } from '../../utils/consts';
+// @ts-ignore
 import { WavHeader, Mp3Encoder } from '../../_externals/lamejs/lame.all';
 
-function encodeMp3(arrayBuffer: ArrayBuffer): WavHeader {
+function encodeMp3(arrayBuffer: ArrayBuffer) {
   const wav = WavHeader.readHeader(new DataView(arrayBuffer));
   const dataView = new Int16Array(arrayBuffer, wav.dataOffset, wav.dataLen / 2);
   const mp3Encoder = new Mp3Encoder(wav.channels, wav.sampleRate, 128);
@@ -14,11 +15,13 @@ function encodeMp3(arrayBuffer: ArrayBuffer): WavHeader {
   if (wav.channels > 1) {
     for (let j = 0; j < samplesLeft.length; j++) {
       samplesLeft[j] = dataView[j * 2];
-      samplesRight[j] = dataView[j * 2 + 1];
+      if (samplesRight) {
+        samplesRight[j] = dataView[j * 2 + 1];
+      }
     }
   }
 
-  const dataBuffer = [];
+  const dataBuffer: Int8Array[] = [];
   let remaining = samplesLeft.length;
   for (let i = 0; remaining >= maxSamples; i += maxSamples) {
     const left = samplesLeft.subarray(i, i + maxSamples);
@@ -44,7 +47,7 @@ function downsampleToWav(file: File, callback: (buffer: ArrayBuffer) => void): v
   const fileReader = new FileReader();
   fileReader.onload = function (ev) {
     // Decode audio
-    audioCtx.decodeAudioData(ev.target.result as ArrayBuffer, (buffer) => {
+    audioCtx.decodeAudioData(ev.target?.result as ArrayBuffer, (buffer) => {
       // this is where you down sample the audio, usually is 44100 samples per second
       const usingWebkit = !window.OfflineAudioContext;
       const offlineAudioCtx = new OfflineAudioContext(1, 16000 * buffer.duration, 16000);
@@ -55,8 +58,8 @@ function downsampleToWav(file: File, callback: (buffer: ArrayBuffer) => void): v
 
       const reader = new FileReader();
       reader.onload = function () {
-        const renderCompleteHandler = (evt): void => {
-          const renderedBuffer = usingWebkit ? evt.renderedBuffer : evt;
+        const renderCompleteHandler = (evt: OfflineAudioCompletionEvent | AudioBuffer) => {
+          const renderedBuffer = usingWebkit ? (evt as OfflineAudioCompletionEvent).renderedBuffer : (evt as AudioBuffer);
           const buffer = bufferToWav(renderedBuffer, renderedBuffer.length);
           if (callback) {
             callback(buffer);
@@ -80,12 +83,12 @@ function downsampleToWav(file: File, callback: (buffer: ArrayBuffer) => void): v
   fileReader.readAsArrayBuffer(file);
 }
 
-function bufferToWav(abuffer, len) {
+function bufferToWav(abuffer: AudioBuffer, len: number) {
   const numOfChan = abuffer.numberOfChannels;
   const length = len * numOfChan * 2 + 44;
   const buffer = new ArrayBuffer(length);
   const view = new DataView(buffer);
-  const channels = [];
+  const channels: any[] = [];
   let i = 0;
   let sample;
   let offset = 0;
@@ -105,9 +108,11 @@ function bufferToWav(abuffer, len) {
   setUint16(16); // 16-bit (hardcoded in this demo)
   setUint32(0x61746164); // "data" - chunk
   setUint32(length - pos - 4); // chunk length
+
   // write interleaved data
-  for (i = 0; i < abuffer.numberOfChannels; i++)
+  for (i = 0; i < abuffer.numberOfChannels; i++) {
     channels.push(abuffer.getChannelData(i));
+  }
 
   while (pos < length) {
     for (i = 0; i < numOfChan; i++) {
@@ -122,15 +127,20 @@ function bufferToWav(abuffer, len) {
 
   return buffer;
 
-  function setUint16(data) {
+  function setUint16(data: number) {
     view.setUint16(pos, data, true);
     pos += 2;
   }
 
-  function setUint32(data) {
+  function setUint32(data: number) {
     view.setUint32(pos, data, true);
     pos += 4;
   }
 }
 
+export interface WebAudioUtils {
+  downsampleToWav: typeof downsampleToWav;
+  encodeMp3: typeof encodeMp3;
+}
+
 export { downsampleToWav, encodeMp3 };
diff --git a/src/hooks/VoiceRecorder/index.tsx b/src/hooks/VoiceRecorder/index.tsx
index 8eb901452..84681b9ca 100644
--- a/src/hooks/VoiceRecorder/index.tsx
+++ b/src/hooks/VoiceRecorder/index.tsx
@@ -9,6 +9,8 @@ import {
   VOICE_RECORDER_AUDIO_BIT_RATE,
 } from '../../utils/consts';
 import useSendbirdStateContext from '../useSendbirdStateContext';
+import { type WebAudioUtils } from './WebAudioUtils';
+import { noop } from '../../utils/utils';
 
 // Input props of VoiceRecorder
 export interface VoiceRecorderProps {
@@ -22,11 +24,11 @@ export interface VoiceRecorderEventHandler {
 
 // Output of VoiceRecorder
 export interface VoiceRecorderContext {
-  start: (eventHandler?: VoiceRecorderEventHandler) => void,
-  stop: () => void,
+  start: (eventHandler?: VoiceRecorderEventHandler) => void;
+  stop: () => void;
   isRecordable: boolean;
 }
-const noop = () => { /* noop */ };
+
 const Context = createContext<VoiceRecorderContext>({
   start: noop,
   stop: noop,
@@ -37,13 +39,13 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
   const { children } = props;
   const { config } = useSendbirdStateContext();
   const { logger, groupChannel } = config;
-  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>(null);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
   const [isRecordable, setIsRecordable] = useState<boolean>(false);
   const [permissionWarning, setPermissionWarning] = useState<boolean>(false);
   const { stringSet } = useLocalization();
 
   const isVoiceMessageEnabled = groupChannel.enableVoiceMessage;
-  const [webAudioUtils, setWebAudioUtils] = useState(null);
+  const [webAudioUtils, setWebAudioUtils] = useState<WebAudioUtils | null>(null);
 
   const browserSupportMimeType = BROWSER_SUPPORT_MIME_TYPE_LIST.find((mimeType) => MediaRecorder.isTypeSupported(mimeType)) ?? '';
   if (isVoiceMessageEnabled && !browserSupportMimeType) {
@@ -52,13 +54,11 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
 
   useEffect(() => {
     if (isVoiceMessageEnabled && !webAudioUtils) {
-      import('./WebAudioUtils').then((data) => {
-        setWebAudioUtils(data);
-      });
+      import('./WebAudioUtils').then((module) => setWebAudioUtils(module));
     }
   }, [isVoiceMessageEnabled, webAudioUtils]);
 
-  const start = useCallback((eventHandler: VoiceRecorderEventHandler): void => {
+  const start = useCallback((eventHandler?: VoiceRecorderEventHandler): void => {
     if (isVoiceMessageEnabled && !webAudioUtils) {
       logger.error('VoiceRecorder: Recording audio processor is being loaded.');
       return;
@@ -95,7 +95,8 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
           mimeType: browserSupportMimeType,
           audioBitsPerSecond: VOICE_RECORDER_AUDIO_BIT_RATE,
         });
-        mediaRecorder.ondataavailable = (e) => { // when recording stops
+        // when recording stops
+        mediaRecorder.ondataavailable = (e) => {
           logger.info('VoiceRecorder: Succeeded getting an available data.', e.data);
           const audioFile = new File([e.data], VOICE_MESSAGE_FILE_NAME, {
             lastModified: new Date().getTime(),
@@ -108,10 +109,11 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
               lastModified: new Date().getTime(),
               type: VOICE_MESSAGE_MIME_TYPE,
             });
-            eventHandler?.onRecordingEnded(convertedAudioFile);
+            eventHandler?.onRecordingEnded?.(convertedAudioFile);
             logger.info('VoiceRecorder: Succeeded converting audio file.', convertedAudioFile);
           });
-          stream?.getAudioTracks?.().forEach?.(track => track?.stop());
+          const tracks = stream.getAudioTracks();
+          tracks.forEach((track) => track.stop());
           setIsRecordable(false);
         };
         mediaRecorder.onstart = eventHandler?.onRecordingStarted ?? noop;
@@ -133,22 +135,13 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
   }, [mediaRecorder]);
 
   return (
-    <Context.Provider value={{
-      start,
-      stop,
-      isRecordable,
-    }}>
+    <Context.Provider value={{ start, stop, isRecordable }}>
       {children}
-      {
-        permissionWarning && (
-          <Modal
-            hideFooter
-            onCancel={() => setPermissionWarning(false)}
-          >
-            <>{stringSet.VOICE_RECORDING_PERMISSION_DENIED}</>
-          </Modal>
-        )
-      }
+      {permissionWarning && (
+        <Modal hideFooter onClose={() => setPermissionWarning(false)}>
+          <>{stringSet.VOICE_RECORDING_PERMISSION_DENIED}</>
+        </Modal>
+      )}
     </Context.Provider>
   );
 };
diff --git a/src/hooks/VoiceRecorder/useVoiceRecorder.tsx b/src/hooks/VoiceRecorder/useVoiceRecorder.tsx
index 730739deb..50533cabf 100644
--- a/src/hooks/VoiceRecorder/useVoiceRecorder.tsx
+++ b/src/hooks/VoiceRecorder/useVoiceRecorder.tsx
@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { VoiceRecorderEventHandler, useVoiceRecorderContext } from '.';
 import useSendbirdStateContext from '../useSendbirdStateContext';
+import { noop } from '../../utils/utils';
 
 // export interface UseVoiceRecorderProps extends VoiceRecorderEventHandler {
 //   /**
@@ -22,23 +23,21 @@ export interface UseVoiceRecorderContext {
   cancel: () => void;
   recordingLimit: number;
   recordingTime: number;
-  recordedFile: File;
+  recordedFile: File | null;
   recordingStatus: VoiceRecorderStatus;
 }
 
-const noop = () => { /* noop */ };
-
 export const useVoiceRecorder = ({
   onRecordingStarted = noop,
   onRecordingEnded = noop,
 }: VoiceRecorderEventHandler): UseVoiceRecorderContext => {
   const { config } = useSendbirdStateContext();
   const { voiceRecord } = config;
-  const { maxRecordingTime } = voiceRecord;
+  const maxRecordingTime = voiceRecord.maxRecordingTime;
   const voiceRecorder = useVoiceRecorderContext();
   const { isRecordable } = voiceRecorder;
 
-  const [recordedFile, setRecordedFile] = useState<File>(null);
+  const [recordedFile, setRecordedFile] = useState<File | null>(null);
   const [recordingStatus, setRecordingStatus] = useState<VoiceRecorderStatus>(VoiceRecorderStatus.PREPARING);
   useEffect(() => {
     if (isRecordable && recordingStatus === VoiceRecorderStatus.PREPARING) {
@@ -72,11 +71,12 @@ export const useVoiceRecorder = ({
 
   // Timer
   const [recordingTime, setRecordingTime] = useState<number>(0);
-  let timer: ReturnType<typeof setInterval> = null;
+  const timer = useRef<ReturnType<typeof setInterval> | null>(null);
   function startTimer() {
     stopTimer();
     setRecordingTime(0);
-    const interval = setInterval(() => {
+
+    timer.current = setInterval(() => {
       setRecordingTime(prevTime => {
         const newTime = prevTime + 100;
         if (newTime > maxRecordingTime) {
@@ -85,11 +85,12 @@ export const useVoiceRecorder = ({
         return newTime;
       });
     }, 100);
-    timer = interval;
   }
   function stopTimer() {
-    clearInterval(timer);
-    timer = null;
+    if (timer.current) {
+      clearInterval(timer.current);
+      timer.current = null;
+    }
   }
   useEffect(() => {
     if (recordingTime > maxRecordingTime) {
diff --git a/src/hooks/useThrottleCallback.ts b/src/hooks/useThrottleCallback.ts
index b9fed48a1..99db7b175 100644
--- a/src/hooks/useThrottleCallback.ts
+++ b/src/hooks/useThrottleCallback.ts
@@ -12,8 +12,8 @@ export function useThrottleCallback<T extends(...args: any[]) => void>(
     trailing: false,
   },
 ) {
-  const timer = useRef(null);
-  const trailingArgs = useRef(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const trailingArgs = useRef<any[] | null>(null);
 
   useEffect(() => {
     return () => {
@@ -58,8 +58,8 @@ export function throttle<T extends(...args: any[]) => void>(
     trailing: false,
   },
 ) {
-  let timer = null;
-  let trailingArgs = null;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let trailingArgs: null | any[] = null;
 
   return ((...args: any[]) => {
     if (timer) {
diff --git a/src/lib/LocalizationContext.tsx b/src/lib/LocalizationContext.tsx
index 10857d790..ad269faf2 100644
--- a/src/lib/LocalizationContext.tsx
+++ b/src/lib/LocalizationContext.tsx
@@ -4,31 +4,22 @@ import getStringSet, { StringSet } from '../ui/Label/stringSet';
 import type { Locale } from 'date-fns';
 import en from 'date-fns/locale/en-US';
 
-const LocalizationContext = React.createContext({
+const LocalizationContextDefault = {
   stringSet: getStringSet('en'),
   dateLocale: en,
-});
+};
+const LocalizationContext = React.createContext(LocalizationContextDefault);
 
 interface LocalizationProviderProps {
   stringSet: StringSet;
-  dateLocale: Locale;
+  dateLocale?: Locale;
   children: React.ReactElement;
 }
 
 const LocalizationProvider = (props: LocalizationProviderProps): React.ReactElement => {
   const { children } = props;
-  return (
-    <LocalizationContext.Provider value={props}>
-      {children}
-    </LocalizationContext.Provider>
-  );
+  return <LocalizationContext.Provider value={{ ...LocalizationContextDefault, ...props }}>{children}</LocalizationContext.Provider>;
 };
 
-export type UseLocalizationType = () => {
-  stringSet: StringSet;
-  dateLocale: Locale;
-};
-
-const useLocalization: UseLocalizationType = () => React.useContext(LocalizationContext);
-
+const useLocalization = () => React.useContext(LocalizationContext);
 export { LocalizationContext, LocalizationProvider, useLocalization };
diff --git a/src/lib/Logger/index.ts b/src/lib/Logger/index.ts
index 7a7eba3c6..f1c180c07 100644
--- a/src/lib/Logger/index.ts
+++ b/src/lib/Logger/index.ts
@@ -27,7 +27,7 @@ const colorLog = (level: LogLevel): string => {
 
 interface PrintLogProps {
   level: LogLevel;
-  title: string;
+  title?: string;
   description?: string;
   payload?: unknown[];
 }
diff --git a/src/lib/Sendbird.tsx b/src/lib/Sendbird.tsx
index 386f3cc26..3756bdb3c 100644
--- a/src/lib/Sendbird.tsx
+++ b/src/lib/Sendbird.tsx
@@ -2,7 +2,6 @@ import './index.scss';
 import './__experimental__typography.scss';
 
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
-import { User } from '@sendbird/chat';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { UIKitConfigProvider, useUIKitConfig } from '@sendbird/uikit-tools';
 
@@ -29,6 +28,7 @@ import { MediaQueryProvider, useMediaQueryContext } from './MediaQueryContext';
 import getStringSet, { StringSet } from '../ui/Label/stringSet';
 import {
   DEFAULT_MULTIPLE_FILES_MESSAGE_LIMIT,
+  DEFAULT_UPLOAD_SIZE_LIMIT,
   VOICE_RECORDER_DEFAULT_MAX,
   VOICE_RECORDER_DEFAULT_MIN,
 } from '../utils/consts';
@@ -45,10 +45,11 @@ import {
   CommonUIKitConfigProps,
   SendbirdChatInitParams,
   CustomExtensionParams,
-  SBUEventHandlers, SendbirdProviderUtils,
+  SBUEventHandlers,
+  SendbirdProviderUtils,
 } from './types';
 import { GlobalModalProvider, ModalRoot } from '../hooks/useModal';
-import { RenderUserProfileProps } from '../types';
+import { RenderUserProfileProps, UserListQuery } from '../types';
 import PUBSUB_TOPICS, { SBUGlobalPubSub, SBUGlobalPubSubTopicPayloadUnion } from './pubSub/topics';
 import { EmojiManager } from './emojiManager';
 import { uikitConfigStorage } from './utils/uikitConfigStorage';
@@ -57,12 +58,6 @@ import { EmojiReactionListRoot, MenuRoot } from '../ui/ContextMenu';
 
 export { useSendbirdStateContext } from '../hooks/useSendbirdStateContext';
 
-export type UserListQueryType = {
-  hasNext?: boolean;
-  next: () => Promise<Array<User>>;
-  get isLoading(): boolean;
-};
-
 interface VoiceRecordOptions {
   maxRecordingTime?: number;
   minRecordingTime?: number;
@@ -101,7 +96,7 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps, React.Pro
   dateLocale?: Locale;
   profileUrl?: string;
   voiceRecord?: VoiceRecordOptions;
-  userListQuery?(): UserListQueryType;
+  userListQuery?: () => UserListQuery;
   imageCompression?: ImageCompressionOptions;
   allowProfileEdit?: boolean;
   disableMarkAsDelivered?: boolean;
@@ -126,10 +121,8 @@ export function SendbirdProvider(props: SendbirdProviderProps) {
       isReactionEnabled: props.isReactionEnabled,
       disableUserProfile: props.disableUserProfile,
       isVoiceMessageEnabled: props.isVoiceMessageEnabled,
-      isTypingIndicatorEnabledOnChannelList:
-        props.isTypingIndicatorEnabledOnChannelList,
-      isMessageReceiptStatusEnabledOnChannelList:
-        props.isMessageReceiptStatusEnabledOnChannelList,
+      isTypingIndicatorEnabledOnChannelList: props.isTypingIndicatorEnabledOnChannelList,
+      isMessageReceiptStatusEnabledOnChannelList: props.isMessageReceiptStatusEnabledOnChannelList,
       showSearchIcon: props.showSearchIcon,
     },
     uikitOptions: props.uikitOptions,
@@ -161,21 +154,21 @@ const SendbirdSDK = ({
   accessToken,
   customApiHost,
   customWebSocketHost,
-  configureSession = null,
+  configureSession,
   theme = 'light',
   config = {},
   nickname = '',
-  colorSet = null,
-  stringSet = null,
-  dateLocale = null,
+  colorSet,
+  stringSet,
+  dateLocale,
   profileUrl = '',
   voiceRecord,
-  userListQuery = null,
+  userListQuery,
   imageCompression = {},
   allowProfileEdit = false,
   disableMarkAsDelivered = false,
-  renderUserProfile = null,
-  onUserProfileMessage = null,
+  renderUserProfile,
+  onUserProfileMessage,
   breakpoint = false,
   isUserIdUsedForNickname = true,
   sdkInitParams,
@@ -183,12 +176,7 @@ const SendbirdSDK = ({
   isMultipleFilesMessageEnabled = false,
   eventHandlers,
 }: SendbirdProviderProps): React.ReactElement => {
-  const {
-    logLevel = '',
-    userMention = {},
-    isREMUnitEnabled = false,
-    pubSub: customPubSub,
-  } = config;
+  const { logLevel = '', userMention = {}, isREMUnitEnabled = false, pubSub: customPubSub } = config;
   const { isMobile } = useMediaQueryContext();
   const [logger, setLogger] = useState(LoggerFactory(logLevel as LogLevel));
   const [pubSub] = useState(() => customPubSub ?? pubSubFactory<PUBSUB_TOPICS, SBUGlobalPubSubTopicPayloadUnion>());
@@ -199,19 +187,15 @@ const SendbirdSDK = ({
   const { configs, configsWithAppAttr, initDashboardConfigs } = useUIKitConfig();
   const sdkInitialized = sdkStore.initialized;
   const sdk = sdkStore?.sdk;
-  const {
-    uploadSizeLimit,
-    multipleFilesMessageFileCountLimit,
-  } = sdk?.appInfo ?? {};
+  const { uploadSizeLimit, multipleFilesMessageFileCountLimit } = sdk?.appInfo ?? {};
 
   useTheme(colorSet);
 
-  const {
-    getCachedTemplate,
-    updateMessageTemplatesInfo,
-    initializeMessageTemplatesInfo,
-  } = useMessageTemplateUtils({
-    sdk, logger, appInfoStore, appInfoDispatcher,
+  const { getCachedTemplate, updateMessageTemplatesInfo, initializeMessageTemplatesInfo } = useMessageTemplateUtils({
+    sdk,
+    logger,
+    appInfoStore,
+    appInfoDispatcher,
   });
 
   const utils: SendbirdProviderUtils = {
@@ -225,7 +209,8 @@ const SendbirdSDK = ({
     accessToken,
     isUserIdUsedForNickname,
     isMobile,
-  }, {
+  },
+  {
     logger,
     nickname,
     profileUrl,
@@ -241,7 +226,8 @@ const SendbirdSDK = ({
     initDashboardConfigs,
     eventHandlers,
     initializeMessageTemplatesInfo,
-  });
+  },
+  );
 
   useUnmount(() => {
     if (typeof sdk.disconnect === 'function') {
@@ -267,9 +253,9 @@ const SendbirdSDK = ({
 
   useEffect(() => {
     const body = document.querySelector('body');
-    body.classList.remove('sendbird-experimental__rem__units');
+    body?.classList.remove('sendbird-experimental__rem__units');
     if (isREMUnitEnabled) {
-      body.classList.add('sendbird-experimental__rem__units');
+      body?.classList.add('sendbird-experimental__rem__units');
     }
   }, [isREMUnitEnabled]);
   // add-remove theme from body
@@ -277,9 +263,9 @@ const SendbirdSDK = ({
     logger.info('Setup theme', `Theme: ${currentTheme}`);
     try {
       const body = document.querySelector('body');
-      body.classList.remove('sendbird-theme--light');
-      body.classList.remove('sendbird-theme--dark');
-      body.classList.add(`sendbird-theme--${currentTheme || 'light'}`);
+      body?.classList.remove('sendbird-theme--light');
+      body?.classList.remove('sendbird-theme--dark');
+      body?.classList.add(`sendbird-theme--${currentTheme || 'light'}`);
       logger.info('Finish setup theme');
       // eslint-disable-next-line no-empty
     } catch (e) {
@@ -288,10 +274,10 @@ const SendbirdSDK = ({
     return () => {
       try {
         const body = document.querySelector('body');
-        body.classList.remove('sendbird-theme--light');
-        body.classList.remove('sendbird-theme--dark');
+        body?.classList.remove('sendbird-theme--light');
+        body?.classList.remove('sendbird-theme--dark');
         // eslint-disable-next-line no-empty
-      } catch { }
+      } catch {}
     };
   }, [currentTheme]);
 
@@ -301,13 +287,7 @@ const SendbirdSDK = ({
   const markAsDeliveredScheduler = useMarkAsDeliveredScheduler({ isConnected: isOnline }, { logger });
 
   const localeStringSet = React.useMemo(() => {
-    if (!stringSet) {
-      return getStringSet('en');
-    }
-    return {
-      ...getStringSet('en'),
-      ...stringSet,
-    };
+    return { ...getStringSet('en'), ...stringSet };
   }, [stringSet]);
 
   /**
@@ -317,9 +297,6 @@ const SendbirdSDK = ({
   const uikitMultipleFilesMessageLimit = useMemo(() => {
     return Math.min(DEFAULT_MULTIPLE_FILES_MESSAGE_LIMIT, multipleFilesMessageFileCountLimit ?? Number.MAX_SAFE_INTEGER);
   }, [multipleFilesMessageFileCountLimit]);
-  const uikitUploadSizeLimit = useMemo(() => {
-    return uploadSizeLimit;
-  }, [uploadSizeLimit]);
 
   // Emoji Manager
   const emojiManager = useMemo(() => {
@@ -356,7 +333,7 @@ const SendbirdSDK = ({
           setCurrentTheme,
           setCurrenttheme: setCurrentTheme, // deprecated: typo
           isMultipleFilesMessageEnabled,
-          uikitUploadSizeLimit,
+          uikitUploadSizeLimit: uploadSizeLimit ?? DEFAULT_UPLOAD_SIZE_LIMIT,
           uikitMultipleFilesMessageLimit,
           userListQuery,
           logger,
@@ -423,9 +400,7 @@ const SendbirdSDK = ({
       <MediaQueryProvider logger={logger} breakpoint={breakpoint}>
         <LocalizationProvider stringSet={localeStringSet} dateLocale={dateLocale}>
           <VoiceMessageProvider>
-            <GlobalModalProvider>
-              {children}
-            </GlobalModalProvider>
+            <GlobalModalProvider>{children}</GlobalModalProvider>
           </VoiceMessageProvider>
         </LocalizationProvider>
       </MediaQueryProvider>
diff --git a/src/lib/SendbirdSdkContext.tsx b/src/lib/SendbirdSdkContext.tsx
index 5cb499350..bd3b867b7 100644
--- a/src/lib/SendbirdSdkContext.tsx
+++ b/src/lib/SendbirdSdkContext.tsx
@@ -8,9 +8,11 @@ type ContextAwareComponentType = {
 
 export const SendbirdSdkContext = React.createContext<SendBirdState | null>(null);
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+/**
+ * @deprecated This function is deprecated. Use `useSendbirdStateContext` instead.
+ * */
 const withSendbirdContext = (OriginalComponent: any, mapStoreToProps: Record<string, any>): ContextAwareComponentType => {
-  const ContextAwareComponent = (props) => (
+  const ContextAwareComponent = (props: any) => (
     <SendbirdSdkContext.Consumer>
       {(context) => {
         if (mapStoreToProps && typeof mapStoreToProps !== 'function') {
@@ -20,7 +22,6 @@ const withSendbirdContext = (OriginalComponent: any, mapStoreToProps: Record<str
         const mergedProps = (mapStoreToProps && typeof mapStoreToProps === 'function')
           ? { ...mapStoreToProps(context), ...props }
           : { ...context, ...props };
-        // eslint-disable-next-line react/jsx-props-no-spreading
         return <OriginalComponent {...mergedProps} />;
       }}
     </SendbirdSdkContext.Consumer>
diff --git a/src/lib/UserProfileContext.tsx b/src/lib/UserProfileContext.tsx
index af4eb3aee..4fa117202 100644
--- a/src/lib/UserProfileContext.tsx
+++ b/src/lib/UserProfileContext.tsx
@@ -16,8 +16,6 @@ interface UserProfileContextInterface {
 const UserProfileContext = React.createContext<UserProfileContextInterface>({
   disableUserProfile: true,
   isOpenChannel: false,
-  renderUserProfile: null,
-  onUserProfileMessage: null,
 });
 
 export type UserProfileProviderProps = React.PropsWithChildren<{
@@ -30,8 +28,8 @@ export type UserProfileProviderProps = React.PropsWithChildren<{
 const UserProfileProvider = ({
   isOpenChannel = false,
   disableUserProfile = false,
-  renderUserProfile = null,
-  onUserProfileMessage = null,
+  renderUserProfile,
+  onUserProfileMessage,
   children,
 }: UserProfileProviderProps) => {
   return (
diff --git a/src/lib/emojiManager.tsx b/src/lib/emojiManager.tsx
index a974c0a83..cc9a2c664 100644
--- a/src/lib/emojiManager.tsx
+++ b/src/lib/emojiManager.tsx
@@ -23,7 +23,7 @@ export interface EmojiManagerParams {
 }
 
 export class EmojiManager {
-  private _emojiContainer: EmojiContainer;
+  private _emojiContainer!: EmojiContainer;
 
   constructor(props: EmojiManagerParams) {
     const { sdk, logger } = props;
@@ -58,7 +58,7 @@ export class EmojiManager {
   }
 
   public getEmojiUrl(reactionKey: Reaction['key']) {
-    return this.AllEmojisAsArray.find((emoji) => emoji.key === reactionKey).url ?? '';
+    return this.AllEmojisAsArray.find((emoji) => emoji.key === reactionKey)?.url ?? '';
   }
 
   public get emojiContainer() {
diff --git a/src/lib/hooks/useOnlineStatus.ts b/src/lib/hooks/useOnlineStatus.ts
index 0976e22a0..e0f08bb2d 100644
--- a/src/lib/hooks/useOnlineStatus.ts
+++ b/src/lib/hooks/useOnlineStatus.ts
@@ -78,14 +78,14 @@ function useOnlineStatus(sdk: SendbirdChat, logger: LoggerInterface) {
     const body = document.querySelector('body');
     if (!isOnline && !sdk?.isCacheEnabled) {
       try {
-        body.classList.add('sendbird__offline');
+        body?.classList.add('sendbird__offline');
         logger.info('Added class sendbird__offline to body');
       } catch (e) {
         //
       }
     } else {
       try {
-        body.classList.remove('sendbird__offline');
+        body?.classList.remove('sendbird__offline');
         logger.info('Removed class sendbird__offline from body');
       } catch (e) {
         //
diff --git a/src/lib/hooks/useTheme.ts b/src/lib/hooks/useTheme.ts
index 8b292758a..bc8fd048f 100644
--- a/src/lib/hooks/useTheme.ts
+++ b/src/lib/hooks/useTheme.ts
@@ -1,7 +1,7 @@
 import { useLayoutEffect } from 'react';
 import cssVars from 'css-vars-ponyfill';
 
-const isEmpty = (obj) => {
+const isEmpty = (obj?: null | Record<string, unknown>) => {
   if (obj === null || obj === undefined) {
     return true;
   }
@@ -14,7 +14,7 @@ const isEmpty = (obj) => {
   return JSON.stringify(obj) === JSON.stringify({});
 };
 
-const useTheme = (overrides: Record<string, string>): void => {
+const useTheme = (overrides?: Record<string, string>): void => {
   useLayoutEffect(() => {
     if (!isEmpty(overrides)) {
       cssVars({
diff --git a/src/lib/pubSub/topics.ts b/src/lib/pubSub/topics.ts
index 631b9008f..0d9146f53 100644
--- a/src/lib/pubSub/topics.ts
+++ b/src/lib/pubSub/topics.ts
@@ -86,13 +86,13 @@ export type SBUGlobalPubSubTopicPayloadUnion =
   | {
       topic: PUBSUB_TOPICS.LEAVE_CHANNEL;
       payload: {
-        channel: GroupChannel | OpenChannel;
+        channel: GroupChannel;
       };
     }
   | {
       topic: PUBSUB_TOPICS.CREATE_CHANNEL;
       payload: {
-        channel: GroupChannel | OpenChannel;
+        channel: GroupChannel;
       };
     }
   | {
diff --git a/src/lib/selectors.ts b/src/lib/selectors.ts
index 846f14d92..6f33e11b9 100644
--- a/src/lib/selectors.ts
+++ b/src/lib/selectors.ts
@@ -421,29 +421,29 @@ export class UikitMessageHandler<T extends SendableMessage = SendableMessage> {
     this._onPending(message);
   }
 
-  public triggerFailed(error: Error, message: T): void {
-    this._onFailed(error, message.isResendable ? message : null);
+  public triggerFailed(error: Error, message: T | null): void {
+    this._onFailed(error, message?.isResendable ? message : null);
   }
 
   public triggerSucceeded(message: T): void {
     this._onSucceeded(message);
   }
 
-  public onPending(handler: MessageHandler<T>): UikitMessageHandler {
+  public onPending(handler: MessageHandler<T>): UikitMessageHandler<T> {
     if (typeof handler === 'function') {
       this._onPending = handler;
     }
     return this;
   }
 
-  public onFailed(handler: FailedMessageHandler<T>): UikitMessageHandler {
+  public onFailed(handler: FailedMessageHandler<T>): UikitMessageHandler<T> {
     if (typeof handler === 'function') {
       this._onFailed = handler;
     }
     return this;
   }
 
-  public onSucceeded(handler: MessageHandler<T>): UikitMessageHandler {
+  public onSucceeded(handler: MessageHandler<T>): UikitMessageHandler<T> {
     if (typeof handler === 'function') {
       this._onSucceeded = handler;
     }
@@ -472,7 +472,7 @@ export const getSendUserMessage = (state: SendBirdState, publishingModules: Publ
           topics.SEND_MESSAGE_FAILED,
           { error, message: message as UserMessage, channel, publishingModules },
         );
-        handler.triggerFailed(error, message);
+        handler.triggerFailed(error, message as SendableMessage);
       })
       .onPending((message) => {
         pubSub.publish(
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 2fdc9bb24..adcb00691 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -68,15 +68,15 @@ export interface SendBirdStateConfig {
   isOnline: boolean;
   userId: string;
   appId: string;
-  accessToken: string;
+  accessToken?: string;
   theme: string;
   pubSub: SBUGlobalPubSub;
   logger: Logger;
   setCurrentTheme: (theme: 'light' | 'dark') => void;
-  userListQuery?(): UserListQuery;
+  userListQuery?: () => UserListQuery;
   uikitUploadSizeLimit: number;
   uikitMultipleFilesMessageLimit: number;
-  voiceRecord?: {
+  voiceRecord: {
     maxRecordingTime: number;
     minRecordingTime: number;
   };
@@ -84,7 +84,7 @@ export interface SendBirdStateConfig {
     maxMentionCount: number,
     maxSuggestionCount: number,
   };
-  imageCompression?: ImageCompressionOptions;
+  imageCompression: ImageCompressionOptions;
   markAsReadScheduler: MarkAsReadSchedulerType;
   markAsDeliveredScheduler: MarkAsDeliveredSchedulerType;
   disableMarkAsDelivered: boolean;
@@ -176,7 +176,7 @@ export type SendBirdState = {
   },
   // Customer provided callbacks
   eventHandlers?: SBUEventHandlers;
-  emojiManager?: EmojiManager;
+  emojiManager: EmojiManager;
   utils: SendbirdProviderUtils;
 };
 
diff --git a/src/modules/App/AppLayout.tsx b/src/modules/App/AppLayout.tsx
index 62fe9072c..62aa7e252 100644
--- a/src/modules/App/AppLayout.tsx
+++ b/src/modules/App/AppLayout.tsx
@@ -10,9 +10,7 @@ import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import { SendableMessageType } from '../../utils';
 import { getCaseResolvedReplyType } from '../../lib/utils/resolvedReplyType';
 
-export const AppLayout: React.FC<AppLayoutProps> = (
-  props: AppLayoutProps,
-) => {
+export const AppLayout = (props: AppLayoutProps) => {
   const {
     isMessageGroupingEnabled,
     allowProfileEdit,
diff --git a/src/modules/App/DesktopLayout.tsx b/src/modules/App/DesktopLayout.tsx
index a3ded1470..3787cd889 100644
--- a/src/modules/App/DesktopLayout.tsx
+++ b/src/modules/App/DesktopLayout.tsx
@@ -3,11 +3,11 @@ import { GroupChannel as GroupChannelClass } from '@sendbird/chat/groupChannel';
 
 import type { DesktopLayoutProps } from './types';
 
-import GroupChannel from '../GroupChannel';
-import GroupChannelList from '../GroupChannelList';
+import GroupChannel, { GroupChannelProps } from '../GroupChannel';
+import GroupChannelList, { GroupChannelListProps } from '../GroupChannelList';
 
-import Channel from '../Channel';
-import ChannelList from '../ChannelList';
+import Channel, { ChannelProps } from '../Channel';
+import ChannelList, { ChannelListProps } from '../ChannelList';
 import ChannelSettings from '../ChannelSettings';
 import MessageSearchPannel from '../MessageSearch';
 import Thread from '../Thread';
@@ -46,7 +46,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
     if (channel) {
       setCurrentChannel(channel);
     } else {
-      setCurrentChannel(null);
+      setCurrentChannel(null ?? undefined);
     }
   };
 
@@ -60,7 +60,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
     }
   };
 
-  const channelListProps = {
+  const channelListProps: GroupChannelListProps & ChannelListProps = {
     allowProfileEdit,
     activeChannelUrl: currentChannel?.url,
     onProfileEditSuccess: onProfileEditSuccess,
@@ -72,7 +72,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
     onUserProfileUpdated: onProfileEditSuccess,
   };
 
-  const channelProps = {
+  const channelProps: ChannelProps & GroupChannelProps = {
     channelUrl: currentChannel?.url || '',
     onChatHeaderActionClick: () => {
       setShowSearch(false);
@@ -97,7 +97,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
     animatedMessage: highlightedMessage,
     onMessageAnimated: () => setHighlightedMessage?.(null),
     showSearchIcon: showSearchIcon,
-    startingPoint: startingPoint,
+    startingPoint: startingPoint ?? undefined,
     isReactionEnabled: isReactionEnabled,
     replyType: replyType,
     isMessageGroupingEnabled: isMessageGroupingEnabled,
diff --git a/src/modules/App/MobileLayout.tsx b/src/modules/App/MobileLayout.tsx
index 18040e09b..53c7cd5a7 100644
--- a/src/modules/App/MobileLayout.tsx
+++ b/src/modules/App/MobileLayout.tsx
@@ -6,9 +6,9 @@ import { GroupChannelHandler, GroupChannel as GroupChannelClass } from '@sendbir
 
 import type { MobileLayoutProps } from './types';
 
-import GroupChannel from '../GroupChannel';
+import GroupChannel, { GroupChannelProps } from '../GroupChannel';
 import GroupChannelList from '../GroupChannelList';
-import Channel from '../Channel';
+import Channel, { ChannelProps } from '../Channel';
 import ChannelList from '../ChannelList';
 import ChannelSettings from '../ChannelSettings';
 import MessageSearch from '../MessageSearch';
@@ -62,7 +62,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
 
   useEffect(() => {
     if (panel !== PANELS.CHANNEL) {
-      goToMessage(null, () => setHighlightedMessage(null));
+      goToMessage(null, () => setHighlightedMessage?.(null));
     }
   }, [panel]);
 
@@ -106,7 +106,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
     onProfileEditSuccess: onProfileEditSuccess,
     disableAutoSelect: true,
     onChannelSelect: (channel: GroupChannelClass | null) => {
-      setCurrentChannel(channel);
+      setCurrentChannel(channel ?? undefined);
       if (channel) {
         setPanel(PANELS.CHANNEL);
       } else {
@@ -121,7 +121,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
     onUserProfileUpdated: onProfileEditSuccess,
   };
 
-  const channelProps = {
+  const channelProps: ChannelProps & GroupChannelProps = {
     channelUrl: currentChannel?.url || '',
     onChatHeaderActionClick: () => {
       setPanel(PANELS.CHANNEL_SETTINGS);
@@ -149,7 +149,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
     animatedMessage: highlightedMessage,
     onMessageAnimated: () => setHighlightedMessage?.(null),
     showSearchIcon,
-    startingPoint,
+    startingPoint: startingPoint ?? undefined,
     isReactionEnabled,
     replyType,
     isMessageGroupingEnabled,
@@ -218,7 +218,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
               setCurrentChannel(channel);
               goToMessage(message, (messageId) => {
                 setPanel(PANELS.CHANNEL);
-                setHighlightedMessage(messageId);
+                setHighlightedMessage?.(messageId);
               });
             }}
           />
diff --git a/src/modules/App/index.tsx b/src/modules/App/index.tsx
index 4811089c1..ae5852f1f 100644
--- a/src/modules/App/index.tsx
+++ b/src/modules/App/index.tsx
@@ -12,6 +12,7 @@ import { AppLayout } from './AppLayout';
 import './index.scss';
 
 import { AppLayoutProps } from './types';
+import { GroupChannel } from '@sendbird/chat/groupChannel';
 
 export interface AppProps {
   appId: SendbirdProviderProps['appId'];
@@ -75,21 +76,21 @@ export default function App(props: AppProps) {
     accessToken = '',
     customApiHost = '',
     customWebSocketHost = '',
-    breakpoint = null,
+    breakpoint,
     theme = 'light',
-    userListQuery = null,
+    userListQuery,
     nickname = '',
     profileUrl = '',
-    dateLocale = null,
+    dateLocale,
     config = {},
     voiceRecord,
     isMessageGroupingEnabled = true,
-    colorSet = null,
-    stringSet = null,
+    colorSet,
+    stringSet,
     allowProfileEdit = false,
     disableMarkAsDelivered = false,
-    renderUserProfile = null,
-    onProfileEditSuccess = null,
+    renderUserProfile,
+    onProfileEditSuccess,
     imageCompression = {},
     disableAutoSelect = false,
     sdkInitParams,
@@ -111,7 +112,7 @@ export default function App(props: AppProps) {
     isTypingIndicatorEnabledOnChannelList,
     isMessageReceiptStatusEnabledOnChannelList,
   } = props;
-  const [currentChannel, setCurrentChannel] = useState(null);
+  const [currentChannel, setCurrentChannel] = useState<GroupChannel>();
 
   return (
     <Sendbird
@@ -125,10 +126,10 @@ export default function App(props: AppProps) {
       theme={theme}
       nickname={nickname}
       profileUrl={profileUrl}
-      dateLocale={dateLocale}
+      dateLocale={dateLocale }
       userListQuery={userListQuery}
       config={config}
-      colorSet={colorSet}
+      colorSet={colorSet }
       disableMarkAsDelivered={disableMarkAsDelivered}
       renderUserProfile={renderUserProfile}
       imageCompression={imageCompression}
diff --git a/src/modules/App/types.ts b/src/modules/App/types.ts
index 6fbe5bf02..82e3a7f5a 100644
--- a/src/modules/App/types.ts
+++ b/src/modules/App/types.ts
@@ -20,7 +20,7 @@ export interface AppLayoutProps {
   onProfileEditSuccess?(user: User): void; // TODO: Unused props, deprecate it
   disableAutoSelect?: boolean;
   currentChannel?: GroupChannel;
-  setCurrentChannel: React.Dispatch<GroupChannel | null>;
+  setCurrentChannel: React.Dispatch<GroupChannel | undefined>;
   enableLegacyChannelModules: boolean;
 }
 
diff --git a/src/modules/Channel/components/ChannelUI/index.tsx b/src/modules/Channel/components/ChannelUI/index.tsx
index 1f8a5afa0..e992fd984 100644
--- a/src/modules/Channel/components/ChannelUI/index.tsx
+++ b/src/modules/Channel/components/ChannelUI/index.tsx
@@ -7,6 +7,8 @@ import ChannelHeader from '../ChannelHeader';
 import MessageList from '../MessageList';
 import MessageInputWrapper from '../MessageInputWrapper';
 import { deleteNullish } from '../../../../utils/utils';
+import { GroupChannelHeaderProps } from '../../../GroupChannel/components/GroupChannelHeader';
+import { GroupChannelMessageListProps } from '../../../GroupChannel/components/MessageList';
 
 export interface ChannelUIProps extends GroupChannelUIBasicProps {
   isLoading?: boolean;
@@ -22,8 +24,8 @@ const ChannelUI = (props: ChannelUIProps) => {
 
   // Inject components to presentation layer
   const {
-    renderChannelHeader = (p) => <ChannelHeader {...p} />,
-    renderMessageList = (p) => <MessageList {...p} className="sendbird-conversation__message-list" />,
+    renderChannelHeader = (p: GroupChannelHeaderProps) => <ChannelHeader {...p} />,
+    renderMessageList = (p: GroupChannelMessageListProps) => <MessageList {...p} className="sendbird-conversation__message-list" />,
     renderMessageInput = () => <MessageInputWrapper {...props} />,
   } = deleteNullish(props);
 
diff --git a/src/modules/Channel/components/Message/index.tsx b/src/modules/Channel/components/Message/index.tsx
index 028893090..a63a5f2cc 100644
--- a/src/modules/Channel/components/Message/index.tsx
+++ b/src/modules/Channel/components/Message/index.tsx
@@ -8,7 +8,7 @@ import MessageView, { MessageProps } from '../../../GroupChannel/components/Mess
 import FileViewer from '../FileViewer';
 import RemoveMessageModal from '../RemoveMessageModal';
 
-const Message = (props: MessageProps): React.ReactElement => {
+const Message = (props: MessageProps) => {
   const { config } = useSendbirdStateContext();
   const {
     initialized,
@@ -36,6 +36,8 @@ const Message = (props: MessageProps): React.ReactElement => {
 
   const { message } = props;
 
+  if (!currentGroupChannel) return null;
+
   return (
     <MessageView
       {...props}
@@ -75,7 +77,7 @@ const Message = (props: MessageProps): React.ReactElement => {
       updateUserMessage={(messageId, params) => {
         updateMessage({
           messageId,
-          message: params.message,
+          message: params.message ?? '',
           mentionedUsers: params.mentionedUsers,
           mentionTemplate: params.mentionedMessageTemplate,
         });
diff --git a/src/modules/Channel/components/MessageInputWrapper/index.tsx b/src/modules/Channel/components/MessageInputWrapper/index.tsx
index cae43fe01..d0983f9d5 100644
--- a/src/modules/Channel/components/MessageInputWrapper/index.tsx
+++ b/src/modules/Channel/components/MessageInputWrapper/index.tsx
@@ -33,7 +33,7 @@ export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
     && getSuggestedReplies(lastMessage).length > 0
     && localMessages?.length === 0;
   const disableMessageInput = props.disabled
-    || isLastMessageSuggestedRepliesEnabled && !!lastMessage.extendedMessagePayload?.['disable_chat_input'];
+    || isLastMessageSuggestedRepliesEnabled && !!lastMessage?.extendedMessagePayload?.['disable_chat_input'];
 
   return (
     <MessageInputWrapperView
@@ -46,17 +46,17 @@ export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
           message: params.message,
           mentionTemplate: params.mentionedMessageTemplate,
           mentionedUsers: params.mentionedUsers,
-          quoteMessage,
+          quoteMessage: quoteMessage ?? undefined,
         });
       }}
       sendFileMessage={(params) => {
-        return sendFileMessage(params.file as File, quoteMessage);
+        return sendFileMessage(params.file as File, quoteMessage ?? undefined);
       }}
       sendVoiceMessage={({ file }, duration) => {
-        return sendVoiceMessage(file as File, duration, quoteMessage);
+        return sendVoiceMessage(file as File, duration, quoteMessage ?? undefined);
       }}
       sendMultipleFilesMessage={({ fileInfoList }) => {
-        return sendMultipleFilesMessage(fileInfoList.map((fileInfo) => fileInfo.file) as File[], quoteMessage);
+        return sendMultipleFilesMessage(fileInfoList.map((fileInfo) => fileInfo.file) as File[], quoteMessage ?? undefined);
       }}
     />
   );
diff --git a/src/modules/Channel/components/MessageList/index.tsx b/src/modules/Channel/components/MessageList/index.tsx
index 9918ae73c..7b4ce2d78 100644
--- a/src/modules/Channel/components/MessageList/index.tsx
+++ b/src/modules/Channel/components/MessageList/index.tsx
@@ -72,7 +72,7 @@ export const MessageList = (props: MessageListProps) => {
   } = useChannelContext();
 
   const store = useSendbirdStateContext();
-  const allMessagesFiltered = typeof filterMessageList === 'function' ? allMessages.filter(filterMessageList as (message: EveryMessage) => boolean) : allMessages;
+  const allMessagesFiltered = typeof filterMessageList === 'function' ? allMessages.filter(filterMessageList) : allMessages;
   const markAsReadScheduler = store.config.markAsReadScheduler;
 
   const [isScrollBottom, setIsScrollBottom] = useState(false);
@@ -111,8 +111,8 @@ export const MessageList = (props: MessageListProps) => {
     setInitialTimeStamp?.(null);
     setAnimatedMessageId?.(null);
     setHighLightedMessageId?.(null);
-    if (scrollRef?.current?.scrollTop > -1) {
-      scrollRef.current.scrollTop = (scrollRef?.current?.scrollHeight ?? 0) - (scrollRef?.current?.offsetHeight ?? 0);
+    if (scrollRef.current && scrollRef.current.scrollTop > -1) {
+      scrollRef.current.scrollTop = (scrollRef.current.scrollHeight ?? 0) - (scrollRef.current.offsetHeight ?? 0);
     }
   };
 
diff --git a/src/modules/Channel/context/ChannelProvider.tsx b/src/modules/Channel/context/ChannelProvider.tsx
index 135834be5..61ba44e0d 100644
--- a/src/modules/Channel/context/ChannelProvider.tsx
+++ b/src/modules/Channel/context/ChannelProvider.tsx
@@ -129,25 +129,25 @@ export type SendMessageType = (params: SendMessageParams) => void;
 export type UpdateMessageType = (props: UpdateMessageParams, callback?: (err: SendbirdError, message: UserMessage) => void) => void;
 
 export interface ChannelProviderInterface extends ChannelContextProps, MessageStoreInterface {
-  scrollToMessage?(createdAt: number, messageId: number): void;
+  scrollToMessage(createdAt: number, messageId: number): void;
   isScrolled?: boolean;
   setIsScrolled?: React.Dispatch<React.SetStateAction<boolean>>;
   messageActionTypes: typeof channelActions;
   messagesDispatcher: React.Dispatch<ChannelActionTypes>;
   quoteMessage: SendableMessageType | null;
   setQuoteMessage: React.Dispatch<React.SetStateAction<SendableMessageType | null>>;
-  initialTimeStamp: number;
-  setInitialTimeStamp: React.Dispatch<React.SetStateAction<number>>;
-  animatedMessageId: number;
-  highLightedMessageId: number;
+  initialTimeStamp: number | null | undefined;
+  setInitialTimeStamp: React.Dispatch<React.SetStateAction<number | null | undefined>>;
+  animatedMessageId: number | null;
+  highLightedMessageId: number | null | undefined;
   nicknamesMap: Map<string, string>;
   emojiAllMap: any;
   onScrollCallback: (callback: () => void) => void;
   onScrollDownCallback: (callback: (param: [BaseMessage[], null] | [null, unknown]) => void) => void;
-  scrollRef: React.MutableRefObject<HTMLDivElement>;
-  setAnimatedMessageId: React.Dispatch<React.SetStateAction<number>>;
-  setHighLightedMessageId: React.Dispatch<React.SetStateAction<number>>;
-  messageInputRef: React.MutableRefObject<HTMLInputElement>,
+  scrollRef: React.RefObject<HTMLDivElement>;
+  setAnimatedMessageId: React.Dispatch<React.SetStateAction<number | null>>;
+  setHighLightedMessageId: React.Dispatch<React.SetStateAction<number | null | undefined>>;
+  messageInputRef: React.RefObject<HTMLInputElement>,
   deleteMessage(message: CoreMessageType): Promise<void>,
   updateMessage: UpdateMessageType,
   resendMessage(failedMessage: SendableMessageType): void,
@@ -160,9 +160,9 @@ export interface ChannelProviderInterface extends ChannelContextProps, MessageSt
   renderUserMentionItem?: (props: { user: User }) => JSX.Element;
 }
 
-const ChannelContext = React.createContext<ChannelProviderInterface | null>(undefined);
+const ChannelContext = React.createContext<ChannelProviderInterface | null>(null);
 
-const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextProps) => {
+const ChannelProvider = (props: ChannelContextProps) => {
   const {
     channelUrl,
     children,
@@ -220,11 +220,11 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
     setHighLightedMessageId(highlightedMessage);
   }, [highlightedMessage]);
   const userFilledMessageListQuery = queries?.messageListParams;
-  const [quoteMessage, setQuoteMessage] = useState<SendableMessageType>(null);
+  const [quoteMessage, setQuoteMessage] = useState<SendableMessageType | null>(null);
   const [isScrolled, setIsScrolled] = useState(false);
 
   const [messagesStore, messagesDispatcher] = useReducer(messagesReducer, messagesInitialState);
-  const scrollRef = useRef(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   const isMentionEnabled = groupChannel.enableMention;
 
@@ -519,8 +519,11 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
   );
 };
 
-export type UseChannelType = () => ChannelProviderInterface;
-const useChannelContext: UseChannelType = () => React.useContext(ChannelContext);
+const useChannelContext = () => {
+  const context = React.useContext(ChannelContext);
+  if (!context) throw new Error('ChannelContext not found. Use within the Channel module.');
+  return context;
+};
 
 export {
   ChannelProvider,
diff --git a/src/modules/Channel/context/hooks/useDeleteMessageCallback.ts b/src/modules/Channel/context/hooks/useDeleteMessageCallback.ts
index 0d6b0f761..c87d546a1 100644
--- a/src/modules/Channel/context/hooks/useDeleteMessageCallback.ts
+++ b/src/modules/Channel/context/hooks/useDeleteMessageCallback.ts
@@ -36,7 +36,7 @@ function useDeleteMessageCallback(
         } else {
           logger.info('Channel | useDeleteMessageCallback: Deleting message from remote:', sendingStatus);
           currentGroupChannel
-            .deleteMessage(message)
+            ?.deleteMessage(message)
             .then(() => {
               logger.info('Channel | useDeleteMessageCallback: Deleting message success!', message);
               messagesDispatcher({
diff --git a/src/modules/Channel/context/hooks/useFileInfoListWithUploaded.ts b/src/modules/Channel/context/hooks/useFileInfoListWithUploaded.ts
index 9d67419b7..dc3b29de1 100644
--- a/src/modules/Channel/context/hooks/useFileInfoListWithUploaded.ts
+++ b/src/modules/Channel/context/hooks/useFileInfoListWithUploaded.ts
@@ -33,12 +33,14 @@ export const useFileInfoListWithUploaded = (message: CoreMessageType): UploadedF
       ...it,
       url: it.url,
       isUploaded: true,
+      mimeType: it.mimeType ?? undefined,
+      fileName: it.fileName ?? undefined,
     }));
   } else {
-    return message.messageParams.fileInfoList.map((it, index) => ({
+    return message?.messageParams?.fileInfoList.map((it, index) => ({
       ...it,
       url: getObjectURL(index) ?? it.fileUrl ?? (it.file instanceof Blob ? getObjectURL(index, it.file) : undefined),
       isUploaded: !it.file && typeof it.fileUrl === 'string' && it.fileUrl.length > 0,
-    }));
+    })) ?? [];
   }
 };
diff --git a/src/modules/Channel/context/hooks/useHandleChannelEvents.ts b/src/modules/Channel/context/hooks/useHandleChannelEvents.ts
index a89eeb35b..ba1e7f34e 100644
--- a/src/modules/Channel/context/hooks/useHandleChannelEvents.ts
+++ b/src/modules/Channel/context/hooks/useHandleChannelEvents.ts
@@ -23,14 +23,14 @@ import { SdkStore } from '../../../../lib/types';
 interface DynamicParams {
   sdkInit: boolean;
   currentUserId: string;
-  currentGroupChannel: GroupChannel;
+  currentGroupChannel: GroupChannel | null;
   disableMarkAsRead: boolean;
 }
 interface StaticParams {
   sdk: SdkStore['sdk'];
   logger: LoggerInterface;
   scrollRef: React.RefObject<HTMLDivElement>;
-  setQuoteMessage: React.Dispatch<React.SetStateAction<SendableMessageType>>;
+  setQuoteMessage: React.Dispatch<React.SetStateAction<SendableMessageType | null>>;
   messagesDispatcher: React.Dispatch<ChannelActionTypes>;
 }
 
@@ -66,7 +66,9 @@ function useHandleChannelEvents({
             let scrollToEnd = false;
             try {
               const { current } = scrollRef;
-              scrollToEnd = current.offsetHeight + current.scrollTop >= current.scrollHeight - 10;
+              if (current) {
+                scrollToEnd = current.offsetHeight + current.scrollTop >= current.scrollHeight - 10;
+              }
               // 10 is a buffer
             } catch (error) {
               //
@@ -193,8 +195,8 @@ function useHandleChannelEvents({
             });
           }
         },
-        onUserBanned: (channel: GroupChannel, user) => {
-          if (compareIds(channel?.url, channelUrl)) {
+        onUserBanned: (channel, user) => {
+          if (compareIds(channel?.url, channelUrl) && channel.isGroupChannel()) {
             logger.info('Channel | useHandleChannelEvents: onUserBanned', { channel, user });
             const isByMe = user?.userId === sdk?.currentUser?.userId;
             messagesDispatcher({
diff --git a/src/modules/Channel/context/hooks/useHandleReconnect.ts b/src/modules/Channel/context/hooks/useHandleReconnect.ts
index ab83f4be1..6672afd07 100644
--- a/src/modules/Channel/context/hooks/useHandleReconnect.ts
+++ b/src/modules/Channel/context/hooks/useHandleReconnect.ts
@@ -23,7 +23,7 @@ interface DynamicParams {
 interface StaticParams {
   logger: Logger;
   sdk: SdkStore['sdk'];
-  currentGroupChannel: GroupChannel;
+  currentGroupChannel: GroupChannel | null;
   scrollRef: React.RefObject<HTMLDivElement>;
   markAsReadScheduler: MarkAsReadSchedulerType;
   messagesDispatcher: React.Dispatch<ChannelActionTypes>;
@@ -65,6 +65,7 @@ function useHandleReconnect(
         }
         if (userFilledMessageListQuery) {
           Object.keys(userFilledMessageListQuery).forEach((key) => {
+            // @ts-ignore
             messageListParams[key] = userFilledMessageListQuery[key];
           });
         }
@@ -74,7 +75,7 @@ function useHandleReconnect(
           payload: null,
         });
 
-        sdk?.groupChannel?.getChannel(currentGroupChannel?.url)
+        sdk?.groupChannel?.getChannel(currentGroupChannel?.url ?? '')
           .then((groupChannel) => {
             const lastMessageTime = new Date().getTime();
 
@@ -86,7 +87,7 @@ function useHandleReconnect(
                 messagesDispatcher({
                   type: messageActionTypes.FETCH_INITIAL_MESSAGES_SUCCESS,
                   payload: {
-                    currentGroupChannel,
+                    currentGroupChannel: groupChannel,
                     messages: messages as CoreMessageType[],
                   },
                 });
@@ -96,11 +97,11 @@ function useHandleReconnect(
                 logger.error('Channel: Fetching messages failed', error);
                 messagesDispatcher({
                   type: messageActionTypes.FETCH_INITIAL_MESSAGES_FAILURE,
-                  payload: { currentGroupChannel },
+                  payload: { currentGroupChannel: groupChannel },
                 });
               });
             if (!disableMarkAsRead) {
-              markAsReadScheduler.push(currentGroupChannel);
+              markAsReadScheduler.push(groupChannel);
             }
           });
       }
diff --git a/src/modules/Channel/context/hooks/useHandleReconnectForChannelList.ts b/src/modules/Channel/context/hooks/useHandleReconnectForChannelList.ts
index 1ebb21318..5bc91eab3 100644
--- a/src/modules/Channel/context/hooks/useHandleReconnectForChannelList.ts
+++ b/src/modules/Channel/context/hooks/useHandleReconnectForChannelList.ts
@@ -17,16 +17,16 @@ import { DELIVERY_RECEIPT } from '../../../../utils/consts';
 interface UseHandleReconnectForChannelListProps {
   // Dynamic props
   isOnline: boolean;
-  reconnectOnIdle: boolean;
+  reconnectOnIdle?: boolean;
 
   // Static props
   logger: Logger;
   sdk: SdkStore['sdk'];
-  currentGroupChannel: GroupChannel;
+  currentGroupChannel: GroupChannel | null;
   channelListDispatcher: React.Dispatch<ChannelListActionTypes>
   setChannelSource: (query: GroupChannelListQuery) => void;
-  userFilledChannelListQuery: GroupChannelListQueryParamsInternal;
-  sortChannelList: (channels: GroupChannel[]) => GroupChannel[];
+  userFilledChannelListQuery?: GroupChannelListQueryParamsInternal;
+  sortChannelList?: (channels: GroupChannel[]) => GroupChannel[];
   disableAutoSelect: boolean;
   markAsDeliveredScheduler: MarkAsDeliveredSchedulerType;
   disableMarkAsDelivered: boolean;
@@ -87,7 +87,7 @@ function useHandleReconnectForChannelList({
                 logger.info('ChannelList refresh - channel list sorted', sortedChannelList);
               }
               // select first channel
-              let newCurrentChannel: GroupChannel = !disableAutoSelect ? sortedChannelList[0] : null;
+              let newCurrentChannel: GroupChannel | null = !disableAutoSelect ? sortedChannelList[0] : null;
               if (currentGroupChannel?.url) {
                 const foundChannel = sortedChannelList.find((channel) => (
                   channel.url === currentGroupChannel.url
diff --git a/src/modules/Channel/context/hooks/useInitialMessagesFetch.ts b/src/modules/Channel/context/hooks/useInitialMessagesFetch.ts
index 87465e0b3..abf26a3e8 100644
--- a/src/modules/Channel/context/hooks/useInitialMessagesFetch.ts
+++ b/src/modules/Channel/context/hooks/useInitialMessagesFetch.ts
@@ -13,9 +13,9 @@ import { ChannelActionTypes } from '../dux/actionTypes';
 import { SCROLL_BOTTOM_DELAY_FOR_FETCH } from '../../../../utils/consts';
 
 type UseInitialMessagesFetchOptions = {
-  currentGroupChannel: GroupChannel;
-  initialTimeStamp: number;
-  userFilledMessageListQuery: MessageListParamsInternal;
+  currentGroupChannel: GroupChannel | null;
+  initialTimeStamp: number | null | undefined;
+  userFilledMessageListQuery?: MessageListParamsInternal;
   replyType: ReplyTypeInternal;
   setIsScrolled: (val: boolean) => void;
 };
@@ -70,6 +70,7 @@ function useInitialMessagesFetch(
       }
       if (userFilledMessageListQuery) {
         Object.keys(userFilledMessageListQuery).forEach((key) => {
+          // @ts-ignore
           messageListParams[key] = userFilledMessageListQuery[key];
         });
       }
diff --git a/src/modules/Channel/context/hooks/useReconnectOnIdle.ts b/src/modules/Channel/context/hooks/useReconnectOnIdle.ts
index 12aed033e..b03a3aef7 100644
--- a/src/modules/Channel/context/hooks/useReconnectOnIdle.ts
+++ b/src/modules/Channel/context/hooks/useReconnectOnIdle.ts
@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
-function useReconnectOnIdle(isOnline: boolean, currentGroupChannel: GroupChannel, reconnectOnIdle = true)
-  :{ shouldReconnect: boolean }
-{
+function useReconnectOnIdle(
+  isOnline: boolean,
+  currentGroupChannel: GroupChannel | null,
+  reconnectOnIdle = true,
+): { shouldReconnect: boolean } {
   const [isTabHidden, setIsTabHidden] = useState<boolean>(false);
   const wasOffline = !isOnline;
 
@@ -20,7 +22,7 @@ function useReconnectOnIdle(isOnline: boolean, currentGroupChannel: GroupChannel
     };
   }, [reconnectOnIdle, document.hidden]);
 
-  const shouldReconnect = wasOffline && currentGroupChannel?.url != null && !isTabHidden;
+  const shouldReconnect = wasOffline && !!currentGroupChannel && !isTabHidden;
   return { shouldReconnect };
 }
 
diff --git a/src/modules/Channel/context/hooks/useResendMessageCallback.ts b/src/modules/Channel/context/hooks/useResendMessageCallback.ts
index c3f496f85..f99f223d6 100644
--- a/src/modules/Channel/context/hooks/useResendMessageCallback.ts
+++ b/src/modules/Channel/context/hooks/useResendMessageCallback.ts
@@ -28,7 +28,7 @@ function useResendMessageCallback(
         // userMessage
         if (failedMessage.isUserMessage()) {
           currentGroupChannel
-            .resendMessage(failedMessage)
+            ?.resendMessage(failedMessage)
             .onPending((message) => {
               logger.info('Channel: Resending message start!', message);
               messagesDispatcher({
@@ -52,7 +52,7 @@ function useResendMessageCallback(
             });
         } else if (failedMessage.isFileMessage()) {
           currentGroupChannel
-            .resendMessage(failedMessage)
+            ?.resendMessage(failedMessage)
             .onPending((message) => {
               logger.info('Channel: Resending file message start!', message);
               messagesDispatcher({
@@ -76,7 +76,7 @@ function useResendMessageCallback(
             });
         } else if (failedMessage.isMultipleFilesMessage()) {
           currentGroupChannel
-            .resendMessage(failedMessage)
+            ?.resendMessage(failedMessage)
             .onPending((message) => {
               logger.info('Channel: Resending multiple files message start!', message);
               messagesDispatcher({
@@ -93,7 +93,7 @@ function useResendMessageCallback(
               });
               pubSub.publish(topics.ON_FILE_INFO_UPLOADED, {
                 response: {
-                  channelUrl: currentGroupChannel.url,
+                  channelUrl: currentGroupChannel?.url ?? '',
                   requestId,
                   index,
                   uploadableFileInfo,
diff --git a/src/modules/Channel/context/hooks/useScrollCallback.ts b/src/modules/Channel/context/hooks/useScrollCallback.ts
index 513936284..ab676d7c2 100644
--- a/src/modules/Channel/context/hooks/useScrollCallback.ts
+++ b/src/modules/Channel/context/hooks/useScrollCallback.ts
@@ -12,9 +12,9 @@ import { CoreMessageType } from '../../../../utils';
 import { SdkStore } from '../../../../lib/types';
 
 type UseScrollCallbackOptions = {
-  currentGroupChannel: GroupChannel;
+  currentGroupChannel: GroupChannel | null;
   oldestMessageTimeStamp: number;
-  userFilledMessageListQuery: MessageListParamsInternal;
+  userFilledMessageListQuery?: MessageListParamsInternal;
   replyType: ReplyTypeInternal;
 };
 
@@ -49,6 +49,7 @@ function useScrollCallback(
 
     if (userFilledMessageListQuery) {
       Object.keys(userFilledMessageListQuery).forEach((key) => {
+        // @ts-ignore
         messageListParams[key] = userFilledMessageListQuery[key];
       });
     }
@@ -58,8 +59,7 @@ function useScrollCallback(
       userFilledMessageListQuery,
     });
 
-    currentGroupChannel
-      .getMessagesByTimestamp(oldestMessageTimeStamp || new Date().getTime(), messageListParams as MessageListParams)
+    currentGroupChannel?.getMessagesByTimestamp(oldestMessageTimeStamp || new Date().getTime(), messageListParams as MessageListParams)
       .then((messages) => {
         messagesDispatcher({
           type: messageActionTypes.FETCH_PREV_MESSAGES_SUCCESS,
diff --git a/src/modules/Channel/context/hooks/useScrollDownCallback.ts b/src/modules/Channel/context/hooks/useScrollDownCallback.ts
index 60ba67c97..c61d459ef 100644
--- a/src/modules/Channel/context/hooks/useScrollDownCallback.ts
+++ b/src/modules/Channel/context/hooks/useScrollDownCallback.ts
@@ -14,7 +14,7 @@ import { CoreMessageType } from '../../../../utils';
 type UseScrollDownCallbackOptions = {
   currentGroupChannel: null | GroupChannel;
   latestMessageTimeStamp: number;
-  userFilledMessageListQuery: MessageListParamsInternal;
+  userFilledMessageListQuery?: MessageListParamsInternal;
   hasMoreNext: boolean;
   replyType: ReplyTypeInternal;
 };
@@ -53,13 +53,13 @@ function useScrollDownCallback(
       }
       if (userFilledMessageListQuery) {
         Object.keys(userFilledMessageListQuery).forEach((key) => {
+          // @ts-ignore
           messageListParams[key] = userFilledMessageListQuery[key];
         });
       }
       logger.info('Channel: Fetching later messages', { currentGroupChannel, userFilledMessageListQuery });
 
-      currentGroupChannel
-        .getMessagesByTimestamp(latestMessageTimeStamp || new Date().getTime(), messageListParams as MessageListParams)
+      currentGroupChannel?.getMessagesByTimestamp(latestMessageTimeStamp || new Date().getTime(), messageListParams as MessageListParams)
         .then((messages) => {
           messagesDispatcher({
             type: messageActionTypes.FETCH_NEXT_MESSAGES_SUCCESS,
diff --git a/src/modules/Channel/context/hooks/useScrollToMessage.ts b/src/modules/Channel/context/hooks/useScrollToMessage.ts
index d55747866..94b742bb2 100644
--- a/src/modules/Channel/context/hooks/useScrollToMessage.ts
+++ b/src/modules/Channel/context/hooks/useScrollToMessage.ts
@@ -1,12 +1,12 @@
 import type { BaseMessage } from '@sendbird/chat/message';
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { scrollToRenderedMessage } from '../utils';
 import { LoggerInterface } from '../../../../lib/Logger';
 
 interface DynamicParams {
-  setInitialTimeStamp: React.Dispatch<React.SetStateAction<number>>;
-  setAnimatedMessageId: React.Dispatch<React.SetStateAction<number>>;
+  setInitialTimeStamp: React.Dispatch<React.SetStateAction<number | null | undefined>>;
+  setAnimatedMessageId: React.Dispatch<React.SetStateAction<number | null>>;
   allMessages: BaseMessage[];
   scrollRef: React.RefObject<HTMLDivElement>;
 }
diff --git a/src/modules/Channel/context/hooks/useSendFileMessageCallback.ts b/src/modules/Channel/context/hooks/useSendFileMessageCallback.ts
index 8fe8368d6..37cabca5f 100644
--- a/src/modules/Channel/context/hooks/useSendFileMessageCallback.ts
+++ b/src/modules/Channel/context/hooks/useSendFileMessageCallback.ts
@@ -14,7 +14,7 @@ import { SCROLL_BOTTOM_DELAY_FOR_SEND } from '../../../../utils/consts';
 
 type UseSendFileMessageCallbackOptions = {
   currentGroupChannel: null | GroupChannel;
-  onBeforeSendFileMessage?: (file: File, quoteMessage: SendableMessageType | null) => FileMessageCreateParams;
+  onBeforeSendFileMessage?: (file: File, quoteMessage?: SendableMessageType) => FileMessageCreateParams;
   imageCompression?: SendBirdState['config']['imageCompression'];
 };
 type UseSendFileMessageCallbackParams = {
@@ -28,9 +28,9 @@ export default function useSendFileMessageCallback(
   { logger, pubSub, scrollRef, messagesDispatcher }: UseSendFileMessageCallbackParams,
 ) {
   const sendMessage = useCallback(
-    (compressedFile: File, quoteMessage = null) => new Promise<FileMessage>((resolve, reject) => {
+    (compressedFile: File, quoteMessage?: SendableMessageType) => new Promise<FileMessage>((resolve, reject) => {
       // Create FileMessageParams
-      let params: FileMessageCreateParams = onBeforeSendFileMessage?.(compressedFile, quoteMessage);
+      let params = onBeforeSendFileMessage?.(compressedFile, quoteMessage);
       if (!params) {
         params = { file: compressedFile };
         if (quoteMessage) {
@@ -41,8 +41,7 @@ export default function useSendFileMessageCallback(
 
       // Send FileMessage
       logger.info('Channel: Uploading file message start!', params);
-      currentGroupChannel
-        .sendFileMessage(params)
+      currentGroupChannel?.sendFileMessage(params)
         .onPending((pendingMessage) => {
           pubSub.publish(topics.SEND_MESSAGE_START, {
             /* pubSub is used instead of messagesDispatcher
diff --git a/src/modules/Channel/context/hooks/useSendMessageCallback.ts b/src/modules/Channel/context/hooks/useSendMessageCallback.ts
index 7bc6983cb..c42f8b568 100644
--- a/src/modules/Channel/context/hooks/useSendMessageCallback.ts
+++ b/src/modules/Channel/context/hooks/useSendMessageCallback.ts
@@ -49,12 +49,12 @@ export default function useSendMessageCallback(
           message,
         };
         // if (isMentionEnabled && mentionedUserIds?.length > 0) {
-        if (isMentionEnabled && mentionedUsers?.length > 0) {
+        if (isMentionEnabled && mentionedUsers && mentionedUsers.length > 0) {
           // params.mentionedUserIds = mentionedUserIds;
           params.mentionedUsers = mentionedUsers;
         }
         // if (isMentionEnabled && mentionTemplate && mentionedUserIds?.length > 0) {
-        if (isMentionEnabled && mentionTemplate && mentionedUsers?.length > 0) {
+        if (isMentionEnabled && mentionTemplate && mentionedUsers && mentionedUsers.length > 0) {
           params.mentionedMessageTemplate = mentionTemplate;
         }
         if (quoteMessage) {
@@ -74,7 +74,7 @@ export default function useSendMessageCallback(
 
       logger.info('Channel: Sending message has started', params);
       currentGroupChannel
-        .sendUserMessage(params)
+        ?.sendUserMessage(params)
         .onPending((pendingMsg) => {
           pubSub.publish(topics.SEND_MESSAGE_START, {
             /* pubSub is used instead of messagesDispatcher
diff --git a/src/modules/Channel/context/hooks/useSendMultipleFilesMessage.ts b/src/modules/Channel/context/hooks/useSendMultipleFilesMessage.ts
index 7dd1bf916..f196b6fdd 100644
--- a/src/modules/Channel/context/hooks/useSendMultipleFilesMessage.ts
+++ b/src/modules/Channel/context/hooks/useSendMultipleFilesMessage.ts
@@ -83,7 +83,7 @@ export const useSendMultipleFilesMessage = ({
       }
       logger.info('Channel: Start sending MFM', { messageParams });
       try {
-        currentChannel.sendMultipleFilesMessage(messageParams)
+        currentChannel?.sendMultipleFilesMessage(messageParams)
           .onFileUploaded((requestId, index, uploadableFileInfo: UploadableFileInfo, error) => {
             logger.info('Channel: onFileUploaded during sending MFM', {
               requestId,
diff --git a/src/modules/Channel/context/hooks/useSendVoiceMessageCallback.ts b/src/modules/Channel/context/hooks/useSendVoiceMessageCallback.ts
index 2eef76fe2..1855f5c2b 100644
--- a/src/modules/Channel/context/hooks/useSendVoiceMessageCallback.ts
+++ b/src/modules/Channel/context/hooks/useSendVoiceMessageCallback.ts
@@ -30,7 +30,7 @@ interface StaticParams {
   scrollRef: React.RefObject<HTMLDivElement>;
   messagesDispatcher: React.Dispatch<ChannelActionTypes>;
 }
-type FuncType = (file: File, duration: number, quoteMessage: SendableMessageType) => Promise<FileMessage>;
+type FuncType = (file: File, duration: number, quoteMessage?: SendableMessageType) => Promise<FileMessage>;
 
 export const useSendVoiceMessageCallback = ({
   currentGroupChannel,
@@ -42,14 +42,11 @@ export const useSendVoiceMessageCallback = ({
   scrollRef,
   messagesDispatcher,
 }: StaticParams): Array<FuncType> => {
-  const sendMessage = useCallback((file: File, duration: number, quoteMessage: SendableMessageType): Promise<FileMessage> => new Promise((resolve, reject) => {
+  const sendMessage = useCallback((file: File, duration: number, quoteMessage?: SendableMessageType): Promise<FileMessage> => new Promise<FileMessage>((resolve, reject) => {
     if (!currentGroupChannel) {
       return;
     }
-    const messageParams: FileMessageCreateParams = (
-      onBeforeSendVoiceMessage
-      && typeof onBeforeSendVoiceMessage === 'function'
-    )
+    const messageParams: FileMessageCreateParams = (onBeforeSendVoiceMessage && typeof onBeforeSendVoiceMessage === 'function')
       ? onBeforeSendVoiceMessage(file, quoteMessage)
       : {
         file,
@@ -90,13 +87,13 @@ export const useSendVoiceMessageCallback = ({
         });
         reject(err);
       })
-      .onSucceeded((succeededMessage: FileMessage) => {
+      .onSucceeded((succeededMessage) => {
         logger.info('Channel: Sending voice message success!', succeededMessage);
         messagesDispatcher({
           type: messageActionTypes.SEND_MESSAGE_SUCCESS,
           payload: succeededMessage as SendableMessageType,
         });
-        resolve(succeededMessage);
+        resolve(succeededMessage as FileMessage);
       });
   }), [
     currentGroupChannel,
diff --git a/src/modules/Channel/context/hooks/useToggleReactionCallback.ts b/src/modules/Channel/context/hooks/useToggleReactionCallback.ts
index f722a4170..ffa984357 100644
--- a/src/modules/Channel/context/hooks/useToggleReactionCallback.ts
+++ b/src/modules/Channel/context/hooks/useToggleReactionCallback.ts
@@ -17,7 +17,7 @@ export default function useToggleReactionCallback(
     (message: BaseMessage, key: string, isReacted: boolean) => {
       if (isReacted) {
         currentGroupChannel
-          .deleteReaction(message, key)
+          ?.deleteReaction(message, key)
           .then((res) => {
             logger.info('Delete reaction success', res);
           })
@@ -26,7 +26,7 @@ export default function useToggleReactionCallback(
           });
       } else {
         currentGroupChannel
-          .addReaction(message, key)
+          ?.addReaction(message, key)
           .then((res) => {
             logger.info('Add reaction success', res);
           })
diff --git a/src/modules/Channel/context/hooks/useUpdateMessageCallback.ts b/src/modules/Channel/context/hooks/useUpdateMessageCallback.ts
index b78871363..e4619deff 100644
--- a/src/modules/Channel/context/hooks/useUpdateMessageCallback.ts
+++ b/src/modules/Channel/context/hooks/useUpdateMessageCallback.ts
@@ -42,7 +42,7 @@ function useUpdateMessageCallback(
         const params: UserMessageUpdateParams = {
           message,
         };
-        if (isMentionEnabled && mentionedUsers?.length > 0) {
+        if (isMentionEnabled && mentionedUsers && mentionedUsers.length > 0) {
           params.mentionedUsers = mentionedUsers;
         }
         if (isMentionEnabled && mentionTemplate) {
@@ -63,7 +63,7 @@ function useUpdateMessageCallback(
 
       logger.info('Channel: Updating message!', params);
       currentGroupChannel
-        .updateUserMessage(messageId, params)
+        ?.updateUserMessage(messageId, params)
         .then((msg) => {
           if (callback) {
             callback(null, msg);
diff --git a/src/modules/Channel/context/utils.ts b/src/modules/Channel/context/utils.ts
index cf97a11b0..fa368ddf5 100644
--- a/src/modules/Channel/context/utils.ts
+++ b/src/modules/Channel/context/utils.ts
@@ -7,15 +7,15 @@ import { CoreMessageType, SendableMessageType } from '../../../utils';
 import { BaseMessage, SendingStatus } from '@sendbird/chat/message';
 
 export const scrollToRenderedMessage = (
-  scrollRef: React.MutableRefObject<HTMLElement>,
+  scrollRef: React.RefObject<HTMLElement>,
   initialTimeStamp: number,
   setIsScrolled?: (val: boolean) => void,
 ) => {
   try {
     const container = scrollRef.current;
     // scroll into the message with initialTimeStamp
-    const element = container.querySelectorAll(`[data-sb-created-at="${initialTimeStamp}"]`)?.[0];
-    if (element instanceof HTMLElement) {
+    const element = container?.querySelectorAll(`[data-sb-created-at="${initialTimeStamp}"]`)?.[0];
+    if (container && element instanceof HTMLElement) {
       // Set the scroll position of the container to bring the element to the top
       container.scrollTop = element.offsetTop;
     }
@@ -29,7 +29,7 @@ export const scrollToRenderedMessage = (
 /* eslint-disable default-param-last */
 export const scrollIntoLast = (
   initialTry = 0,
-  scrollRef: React.MutableRefObject<HTMLElement>,
+  scrollRef: React.RefObject<HTMLElement>,
   setIsScrolled?: (val: boolean) => void,
 ) => {
   const MAX_TRIES = 10;
@@ -40,7 +40,7 @@ export const scrollIntoLast = (
   }
   try {
     const scrollDOM = scrollRef?.current || document.querySelector('.sendbird-conversation__messages-padding');
-    scrollDOM.scrollTop = scrollDOM.scrollHeight;
+    if (scrollDOM) scrollDOM.scrollTop = scrollDOM.scrollHeight;
     setIsScrolled?.(true);
   } catch (error) {
     setTimeout(() => {
@@ -54,12 +54,12 @@ export const isOperator = (groupChannel?: GroupChannel) => {
   return myRole === 'operator';
 };
 
-export const isDisabledBecauseFrozen = (groupChannel?: GroupChannel) => {
+export const isDisabledBecauseFrozen = (groupChannel?: GroupChannel | null) => {
   const isFrozen = groupChannel?.isFrozen;
   return isFrozen && !isOperator(groupChannel);
 };
 
-export const isDisabledBecauseMuted = (groupChannel?: GroupChannel) => {
+export const isDisabledBecauseMuted = (groupChannel?: GroupChannel | null) => {
   const myMutedState = groupChannel?.myMutedState;
   return myMutedState === 'muted';
 };
diff --git a/src/modules/ChannelList/components/AddChannel/index.tsx b/src/modules/ChannelList/components/AddChannel/index.tsx
index d32f56b0a..70d4ab9c9 100644
--- a/src/modules/ChannelList/components/AddChannel/index.tsx
+++ b/src/modules/ChannelList/components/AddChannel/index.tsx
@@ -12,7 +12,7 @@ export const AddChannel = () => {
       onChangeCreateChannelVisible={setShowModal}
       onCreateChannelClick={overrideInviteUser}
       onBeforeCreateChannel={onBeforeCreateChannel}
-      onChannelCreated={onChannelSelect}
+      onChannelCreated={it => onChannelSelect?.(it)}
     />
   );
 };
diff --git a/src/modules/ChannelList/components/ChannelListUI/index.tsx b/src/modules/ChannelList/components/ChannelListUI/index.tsx
index 3ea7ed7af..10a1a6b57 100644
--- a/src/modules/ChannelList/components/ChannelListUI/index.tsx
+++ b/src/modules/ChannelList/components/ChannelListUI/index.tsx
@@ -9,9 +9,10 @@ import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { GroupChannelListUIView } from '../../../GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView';
 import AddChannel from '../AddChannel';
 import { GroupChannelListItemBasicProps } from '../../../GroupChannelList/components/GroupChannelListItem/GroupChannelListItemView';
+import { noop } from '../../../../utils/utils';
 
 interface ChannelPreviewProps extends Omit<GroupChannelListItemBasicProps, 'onLeaveChannel'> {
-  onLeaveChannel(channel?: GroupChannel, onLeaveChannelCb?: (channel: GroupChannel, error?: null) => void): Promise<void>;
+  onLeaveChannel(channel?: GroupChannel, onLeaveChannelCb?: (channel: GroupChannel, error?: unknown) => void): Promise<void>;
 }
 
 export interface ChannelListUIProps {
@@ -61,7 +62,7 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
           payload: channel,
         });
       },
-      async onLeaveChannel(channel?: GroupChannel, cb?: (channel: GroupChannel, error?: null) => void) {
+      async onLeaveChannel(channel?: GroupChannel, cb?: (channel: GroupChannel, error?: unknown) => void) {
         logger.info('ChannelList: Leaving channel', channel);
         if (channel) {
           try {
@@ -100,9 +101,9 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
       renderPlaceHolderError={renderPlaceHolderError}
       renderPlaceHolderLoading={renderPlaceHolderLoading}
       renderPlaceHolderEmptyList={renderPlaceHolderEmptyList}
-      onChangeTheme={onThemeChange}
+      onChangeTheme={onThemeChange ?? noop}
       allowProfileEdit={allowProfileEdit}
-      onUserProfileUpdated={onProfileEditSuccess}
+      onUserProfileUpdated={onProfileEditSuccess ?? noop}
       channels={allChannels}
       onLoadMore={fetchChannelList}
       initialized={initialized}
diff --git a/src/modules/ChannelList/context/ChannelListProvider.tsx b/src/modules/ChannelList/context/ChannelListProvider.tsx
index a5b908c34..b54a7c60a 100644
--- a/src/modules/ChannelList/context/ChannelListProvider.tsx
+++ b/src/modules/ChannelList/context/ChannelListProvider.tsx
@@ -49,14 +49,14 @@ export interface GroupChannelListQueryParamsInternal {
   userIdsExactFilter?: Array<string>;
   userIdsIncludeFilter?: Array<string>;
   userIdsIncludeFilterQueryType?: QueryType;
-  nicknameContainsFilter?: string;
+  nicknameContainsFilter?: string | null;
   channelNameContainsFilter?: string;
-  customTypesFilter?: Array<string>;
-  customTypeStartsWithFilter?: string;
-  channelUrlsFilter?: Array<string>;
+  customTypesFilter?: Array<string> | null;
+  customTypeStartsWithFilter?: string | null;
+  channelUrlsFilter?: Array<string> | null;
   superChannelFilter?: SuperChannelFilter;
   publicChannelFilter?: PublicChannelFilter;
-  metadataOrderKeyFilter?: string;
+  metadataOrderKeyFilter?: string | null;
   memberStateFilter?: MyMemberStateFilter;
   hiddenChannelFilter?: HiddenChannelFilter;
   unreadChannelFilter?: UnreadChannelFilter;
@@ -100,35 +100,15 @@ export interface ChannelListProviderInterface extends ChannelListProviderProps {
   initialized: boolean;
   loading: boolean;
   allChannels: GroupChannel[];
-  currentChannel: GroupChannel;
-  channelListQuery: GroupChannelListQueryParamsInternal;
+  currentChannel: GroupChannel | null;
+  channelListQuery: GroupChannelListQueryParamsInternal | null;
   currentUserId: string;
   channelListDispatcher: React.Dispatch<ChannelListActionTypes>;
   channelSource: GroupChannelListQuerySb | null;
   fetchChannelList: () => void;
 }
 
-const ChannelListContext = React.createContext<ChannelListProviderInterface | null>({
-  disableUserProfile: true,
-  allowProfileEdit: true,
-  onBeforeCreateChannel: null,
-  onThemeChange: null,
-  onProfileEditSuccess: null,
-  onChannelSelect: null,
-  queries: {},
-  className: null,
-  initialized: false,
-  loading: false,
-  allChannels: [],
-  currentChannel: null,
-  channelListQuery: {},
-  currentUserId: null,
-  channelListDispatcher: null,
-  channelSource: null,
-  typingChannels: [],
-  fetchChannelList: noop,
-  reconnectOnIdle: true,
-});
+const ChannelListContext = React.createContext<ChannelListProviderInterface | null>(null);
 
 const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelListProviderProps) => {
   // destruct props
@@ -169,7 +149,7 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
   // enable if it is true at least once(both are false by default)
   const userDefinedDisableUserProfile = disableUserProfile ?? !config.common.enableUsingDefaultUserProfile;
   const userDefinedRenderProfile = config?.renderUserProfile;
-  const enableEditProfile = allowProfileEdit || config?.allowProfileEdit;
+  const enableEditProfile = allowProfileEdit || config.allowProfileEdit;
 
   const userFilledChannelListQuery = queries?.channelListQuery;
   const userFilledApplicationUserListQuery = queries?.applicationUserListQuery;
@@ -199,7 +179,7 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
         channelListDispatcher,
         setChannelSource,
         onChannelSelect,
-        userFilledChannelListQuery,
+        userFilledChannelListQuery: { ...userFilledChannelListQuery },
         logger,
         sortChannelList,
         disableAutoSelect,
@@ -409,8 +389,9 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
   );
 };
 
-function useChannelListContext(): ChannelListProviderInterface {
-  const context: ChannelListProviderInterface = useContext(ChannelListContext);
+function useChannelListContext() {
+  const context = useContext(ChannelListContext);
+  if (!context) throw new Error('ChannelListContext not found. Use within the ChannelList module.');
   return context;
 }
 
diff --git a/src/modules/ChannelList/index.tsx b/src/modules/ChannelList/index.tsx
index bc699843e..d49d34861 100644
--- a/src/modules/ChannelList/index.tsx
+++ b/src/modules/ChannelList/index.tsx
@@ -6,7 +6,7 @@ import {
 
 import ChannelListUI, { ChannelListUIProps } from './components/ChannelListUI';
 
-interface ChannelListProps extends ChannelListProviderProps, ChannelListUIProps {}
+export interface ChannelListProps extends ChannelListProviderProps, ChannelListUIProps {}
 
 const ChannelList: React.FC<ChannelListProps> = (props: ChannelListProps) => {
   return (
diff --git a/src/modules/ChannelList/utils.ts b/src/modules/ChannelList/utils.ts
index 16439b856..3a2d54245 100644
--- a/src/modules/ChannelList/utils.ts
+++ b/src/modules/ChannelList/utils.ts
@@ -83,7 +83,7 @@ const createEventHandler = ({ sdk, sdkChannelHandlerId, channelListDispatcher, l
       }
     },
     onMessageUpdated: (channel, message) => {
-      if (channel.isGroupChannel() && channel.lastMessage.isEqual(message)) {
+      if (channel.isGroupChannel() && channel.lastMessage?.isEqual(message)) {
         logger.info('ChannelList: onMessageUpdated', channel);
         channelListDispatcher({
           type: channelActions.ON_LAST_MESSAGE_UPDATED,
@@ -124,7 +124,7 @@ const createEventHandler = ({ sdk, sdkChannelHandlerId, channelListDispatcher, l
 
 type CreateChannelListQueryParams = {
   sdk: SdkStore['sdk'];
-  userFilledChannelListQuery: GroupChannelListQueryParamsInternal;
+  userFilledChannelListQuery?: GroupChannelListQueryParamsInternal;
 };
 
 export const createChannelListQuery = ({
@@ -139,6 +139,7 @@ export const createChannelListQuery = ({
 
   if (userFilledChannelListQuery) {
     Object.keys(userFilledChannelListQuery).forEach((key) => {
+      // @ts-ignore
       params[key] = userFilledChannelListQuery[key];
     });
   }
@@ -159,7 +160,7 @@ type SetupChannelListParams = {
   onChannelSelect: (channel: ChannelListInitialStateType['currentChannel']) => void;
   userFilledChannelListQuery: GroupChannelListQueryParamsInternal;
   logger: LoggerInterface;
-  sortChannelList: (channels: GroupChannel[]) => GroupChannel[];
+  sortChannelList?: (channels: GroupChannel[]) => GroupChannel[];
   disableAutoSelect: boolean;
   markAsDeliveredScheduler: MarkAsDeliveredSchedulerType;
   disableMarkAsDelivered: boolean;
@@ -270,8 +271,7 @@ export const pubSubHandler = (pubSub: SBUGlobalPubSub, channelListDispatcher: Re
   if (!pubSub) return subscriber;
   subscriber.set(
     topics.CREATE_CHANNEL,
-    pubSub.subscribe(topics.CREATE_CHANNEL, (msg: { channel: GroupChannel }) => {
-      const { channel } = msg;
+    pubSub.subscribe(topics.CREATE_CHANNEL, ({ channel }) => {
       channelListDispatcher({
         type: channelActions.CREATE_CHANNEL,
         payload: channel,
diff --git a/src/modules/ChannelSettings/components/ChannelProfile/index.tsx b/src/modules/ChannelSettings/components/ChannelProfile/index.tsx
index d745612d8..44ec58bb9 100644
--- a/src/modules/ChannelSettings/components/ChannelProfile/index.tsx
+++ b/src/modules/ChannelSettings/components/ChannelProfile/index.tsx
@@ -25,10 +25,10 @@ const ChannelProfile: React.FC = () => {
   const isOnline = state?.config?.isOnline;
   const disabled = !isOnline;
 
-  const { channel } = channelSettingStore;
+  const channel = channelSettingStore?.channel;
 
   const getChannelName = () => {
-    if (channel?.name && channel?.name !== 'Group Channel') {
+    if (channel?.name && channel.name !== 'Group Channel') {
       return channel.name;
     }
     if (channel?.name === 'Group Channel' || !channel?.name) {
diff --git a/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx b/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx
index 3c7575135..c9d2233d1 100644
--- a/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx
+++ b/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx
@@ -28,7 +28,7 @@ export interface ChannelSettingsUIProps {
 
 const ChannelSettingsUI = (props: ChannelSettingsUIProps) => {
   const {
-    renderHeader = (p) => <ChannelSettingsHeader {...p} />,
+    renderHeader = (p: ChannelSettingsHeaderProps) => <ChannelSettingsHeader {...p} />,
     renderLeaveChannel,
     renderChannelProfile,
     renderModerationPanel,
@@ -37,11 +37,12 @@ const ChannelSettingsUI = (props: ChannelSettingsUIProps) => {
   } = deleteNullish(props);
 
   const state = useSendbirdStateContext();
-  const isOnline = state?.config?.isOnline;
-  const { stringSet } = useContext(LocalizationContext);
   const { channel, invalidChannel, onCloseClick, loading } = useChannelSettingsContext();
   const [showLeaveChannelModal, setShowLeaveChannelModal] = useState(false);
 
+  const isOnline = state?.config?.isOnline;
+  const { stringSet } = useContext(LocalizationContext);
+
   if (loading) {
     if (renderPlaceholderLoading) return renderPlaceholderLoading();
     return <PlaceHolder type={PlaceHolderTypes.LOADING} />;
diff --git a/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx b/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
index fadc3ab21..5c3a7433d 100644
--- a/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
+++ b/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
@@ -12,6 +12,7 @@ import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
 import TextButton from '../../../../ui/TextButton';
 import ChannelAvatar from '../../../../ui/ChannelAvatar/index';
 import uuidv4 from '../../../../utils/uuid';
+import { FileCompat } from '@sendbird/chat';
 
 export type EditDetailsProps = {
   onSubmit: () => void;
@@ -37,11 +38,11 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
   const theme = state?.config?.theme;
   const logger = state?.config?.logger;
 
-  const inputRef = useRef(null);
-  const formRef = useRef(null);
-  const hiddenInputRef = useRef(null);
-  const [currentImg, setCurrentImg] = useState(null);
-  const [newFile, setNewFile] = useState(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const hiddenInputRef = useRef<HTMLInputElement>(null);
+  const [currentImg, setCurrentImg] = useState<string | null>(null);
+  const [newFile, setNewFile] = useState<File | null>(null);
   const { stringSet } = useContext(LocalizationContext);
 
   return (
@@ -51,14 +52,14 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
       submitText={stringSet.BUTTON__SAVE}
       onCancel={onCancel}
       onSubmit={() => {
-        if (title !== '' && !inputRef.current.value) {
-          if (formRef.current.reportValidity) { // might not work in explorer
+        if (title !== '' && !inputRef.current?.value) {
+          if (formRef.current?.reportValidity) { // might not work in explorer
             formRef.current.reportValidity();
           }
           return;
         }
 
-        const currentTitle = inputRef.current.value;
+        const currentTitle = inputRef.current?.value;
         const currentImg = newFile;
         logger.info('ChannelSettings: Channel information being updated', {
           currentTitle,
@@ -66,7 +67,7 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
         });
         if (onBeforeUpdateChannel) {
           logger.info('ChannelSettings: onBeforeUpdateChannel');
-          const params = onBeforeUpdateChannel(currentTitle, currentImg, channel?.data);
+          const params = onBeforeUpdateChannel(currentTitle ?? '', currentImg, channel?.data);
           channel?.updateChannel(params).then((groupChannel) => {
             onChannelModified?.(groupChannel);
             setChannelUpdateId(uuidv4());
@@ -75,13 +76,13 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
         } else {
           logger.info('ChannelSettings: normal');
           channel?.updateChannel({
-            coverImage: currentImg,
+            coverImage: currentImg as FileCompat,
             name: currentTitle,
             data: channel?.data || '',
           }).then((groupChannel) => {
             logger.info('ChannelSettings: Channel information updated', groupChannel);
             onChannelModified?.(groupChannel);
-            setChannelUpdateId(uuidv4());
+            setChannelUpdateId?.(uuidv4());
             onSubmit();
           });
         }
@@ -123,14 +124,18 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
             accept="image/gif, image/jpeg, image/png"
             style={{ display: 'none' }}
             onChange={(e) => {
-              setCurrentImg(URL.createObjectURL(e.target.files[0]));
-              setNewFile(e.target.files[0]);
-              hiddenInputRef.current.value = '';
+              if (e.target.files) {
+                setCurrentImg(URL.createObjectURL(e.target.files[0]));
+                setNewFile(e.target.files[0]);
+              }
+              if (hiddenInputRef.current) {
+                hiddenInputRef.current.value = '';
+              }
             }}
           />
           <TextButton
             className="channel-profile-form__avatar-button"
-            onClick={() => hiddenInputRef.current.click()}
+            onClick={() => hiddenInputRef.current?.click()}
             disableUnderline
           >
             <Label type={LabelTypography.BUTTON_1} color={LabelColors.PRIMARY}>
diff --git a/src/modules/ChannelSettings/components/LeaveChannel/index.tsx b/src/modules/ChannelSettings/components/LeaveChannel/index.tsx
index c77297b63..786cbabe7 100644
--- a/src/modules/ChannelSettings/components/LeaveChannel/index.tsx
+++ b/src/modules/ChannelSettings/components/LeaveChannel/index.tsx
@@ -33,7 +33,7 @@ const LeaveChannel: React.FC<LeaveChannelProps> = (props: LeaveChannelProps) =>
   const logger = state?.config?.logger;
   const isOnline = state?.config?.isOnline;
   const { isMobile } = useMediaQueryContext();
-  const getChannelName = (channel: GroupChannel) => {
+  const getChannelName = (channel: GroupChannel | null) => {
     if (channel?.name && channel?.name !== 'Group Channel') {
       return channel.name;
     }
@@ -58,7 +58,7 @@ const LeaveChannel: React.FC<LeaveChannelProps> = (props: LeaveChannelProps) =>
             channel?.leave()
               .then(() => {
                 logger.info('ChannelSettings: Leaving channel successful!', channel);
-                onLeaveChannel();
+                onLeaveChannel?.();
               });
           }}
           className="sendbird-channel-settings__leave-label--mobile"
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx
index 1d811a887..4662d5266 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx
@@ -4,7 +4,6 @@ import React, {
   useState,
   useContext,
 } from 'react';
-import { OperatorFilter } from '@sendbird/chat/groupChannel';
 
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Modal from '../../../../ui/Modal';
@@ -15,6 +14,7 @@ import Label, {
 import { ButtonTypes } from '../../../../ui/Button';
 import UserListItem from '../../../../ui/UserListItem';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
+import { Member, MemberListQuery, OperatorFilter } from '@sendbird/chat/groupChannel';
 import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
 
 interface Props {
@@ -26,9 +26,9 @@ export default function AddOperatorsModal({
   onCancel,
   onSubmit,
 }: Props): ReactElement {
-  const [members, setMembers] = useState([]);
+  const [members, setMembers] = useState<Member[]>([]);
   const [selectedMembers, setSelectedMembers] = useState({});
-  const [memberQuery, setMemberQuery] = useState(null);
+  const [memberQuery, setMemberQuery] = useState<MemberListQuery | null>(null);
   const { stringSet } = useContext(LocalizationContext);
 
   const { channel } = useChannelSettingsContext();
@@ -38,10 +38,10 @@ export default function AddOperatorsModal({
       operatorFilter: OperatorFilter.NONOPERATOR,
       limit: 20,
     });
-    memberListQuery.next().then((members) => {
+    memberListQuery?.next().then((members) => {
       setMembers(members);
     });
-    setMemberQuery(memberListQuery);
+    setMemberQuery(memberListQuery ?? null);
   }, []);
 
   const selectedCount = Object.keys(selectedMembers).filter((m) => selectedMembers[m]).length;
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx
index 7b892937d..7309e3439 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx
@@ -5,7 +5,7 @@ import React, {
   useCallback,
   useContext,
 } from 'react';
-import { BannedUserListQueryParams } from '@sendbird/chat';
+import { BannedUserListQueryParams, RestrictedUser } from '@sendbird/chat';
 
 import Button, { ButtonTypes, ButtonSizes } from '../../../../ui/Button';
 import
@@ -23,7 +23,7 @@ import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 
 export const BannedMemberList = (): ReactElement => {
-  const [members, setMembers] = useState([]);
+  const [members, setMembers] = useState<RestrictedUser[]>([]);
   const [hasNext, setHasNext] = useState(false);
   const [showModal, setShowModal] = useState(false);
 
@@ -54,6 +54,7 @@ export const BannedMemberList = (): ReactElement => {
       setHasNext(bannedUserListQuery.hasNext);
     });
   }, [channel]);
+
   return (
     <>
       {
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx
index 73917cd66..616186e41 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx
@@ -13,6 +13,7 @@ import ContextMenu, { MenuItem, MenuItems } from '../../../../ui/ContextMenu';
 import { noop } from '../../../../utils/utils';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { useLocalization } from '../../../../lib/LocalizationContext';
+import { BannedUserListQuery, RestrictedUser } from '@sendbird/chat';
 import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
 
 interface Props {
@@ -22,17 +23,19 @@ interface Props {
 export default function BannedUsersModal({
   onCancel,
 }: Props): ReactElement {
-  const [members, setMembers] = useState([]);
-  const [memberQuery, setMemberQuery] = useState(null);
+  const [members, setMembers] = useState<RestrictedUser[]>([]);
+  const [memberQuery, setMemberQuery] = useState<BannedUserListQuery | null>(null);
   const { channel } = useChannelSettingsContext();
   const { stringSet } = useLocalization();
 
   useEffect(() => {
     const bannedUserListQuery = channel?.createBannedUserListQuery();
-    bannedUserListQuery.next().then((users) => {
-      setMembers(users);
-    });
-    setMemberQuery(bannedUserListQuery);
+    if (bannedUserListQuery) {
+      bannedUserListQuery.next().then((users) => {
+        setMembers(users);
+      });
+      setMemberQuery(bannedUserListQuery);
+    }
   }, []);
   return (
     <div>
@@ -47,6 +50,7 @@ export default function BannedUsersModal({
           className="sendbird-more-members__popup-scroll"
           onScroll={useOnScrollPositionChangeDetector({
             onReachedBottom: async () => {
+              if (!memberQuery) return;
               const { hasNext } = memberQuery;
               if (hasNext) {
                 memberQuery.next().then((o) => {
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx
index e55c4b9ce..d6e9ddb47 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx
@@ -17,8 +17,8 @@ interface Props {
 }
 
 export default function InviteUsers({ onCancel, onSubmit }: Props) {
-  const [users, setUsers] = useState([]);
-  const [userListQuery, setUserListQuery] = useState(null);
+  const [users, setUsers] = useState<User[]>([]);
+  const [userListQuery, setUserListQuery] = useState<UserListQuery | null>(null);
   const [selectedUsers, setSelectedUsers] = useState<Record<UserId, User>>({});
 
   const state = useSendbirdStateContext();
@@ -39,7 +39,7 @@ export default function InviteUsers({ onCancel, onSubmit }: Props) {
 
   const onInviteUsers = async () => {
     const userIdsToInvite = Object.keys(selectedUsers);
-    if (typeof overrideInviteUser === 'function') {
+    if (channel && typeof overrideInviteUser === 'function') {
       overrideInviteUser({ users: userIdsToInvite, onClose: onCancel, channel });
     } else {
       await channel?.inviteWithUserIds(userIdsToInvite);
@@ -60,7 +60,7 @@ export default function InviteUsers({ onCancel, onSubmit }: Props) {
 
   const membersMap = useMemo(() => {
     // UIKit policy: In a super or broadcast channel, do not check the members when inviting users.
-    if (channel?.isSuper || channel?.isBroadcast) return { [sdk.currentUser.userId]: sdk.currentUser };
+    if (channel?.isSuper || channel?.isBroadcast) return { [sdk.currentUser?.userId ?? '']: sdk.currentUser };
 
     return channel?.members.reduce((acc, cur) => {
       acc[cur.userId] = cur;
@@ -95,7 +95,7 @@ export default function InviteUsers({ onCancel, onSubmit }: Props) {
         <div className="sendbird-more-members__popup-scroll" onScroll={onScroll}>
           <div className="sendbird-more-members__popup-scroll__inner">
             {users.map((user) => {
-              const isMember = Boolean(membersMap[user.userId]);
+              const isMember = Boolean(membersMap ? membersMap[user.userId] : false);
               const isSelected = Boolean(selectedUsers[user.userId]);
               return (
                 <UserListItem
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx
index 155e229ad..78b34b77d 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx
@@ -19,6 +19,7 @@ import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import { noop } from '../../../../utils/utils';
+import uuidv4 from '../../../../utils/uuid';
 
 export const MemberList = (): ReactElement => {
   const [members, setMembers] = useState<Array<Member>>([]);
@@ -29,6 +30,7 @@ export const MemberList = (): ReactElement => {
   const state = useSendbirdStateContext();
   const {
     channel,
+    setChannelUpdateId,
   } = useChannelSettingsContext();
   const { stringSet } = useContext(LocalizationContext);
 
@@ -57,6 +59,7 @@ export const MemberList = (): ReactElement => {
     memberUserListQuery.next().then((members) => {
       setMembers(members);
       setHasNext(memberUserListQuery.hasNext);
+      setChannelUpdateId?.(uuidv4());
     });
   }, [channel]);
 
@@ -67,7 +70,7 @@ export const MemberList = (): ReactElement => {
           <UserListItem
             key={member.userId}
             user={member}
-            currentUser={sdk.currentUser.userId}
+            currentUser={sdk?.currentUser?.userId}
             action={
               (channel?.myRole === 'operator' && userId !== member.userId)
                 ? ({ actionRef, parentRef }) => (
@@ -148,7 +151,7 @@ export const MemberList = (): ReactElement => {
                     )}
                   />
                 )
-                : null
+                : () => null
             }
           />
         ))
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx
index 6bab63ed0..ea7426259 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx
@@ -4,8 +4,8 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import type { Member } from '@sendbird/chat/groupChannel';
 import { Role } from '@sendbird/chat';
+import { type Member, MemberListQuery } from '@sendbird/chat/groupChannel';
 
 import Modal from '../../../../ui/Modal';
 import UserListItem from '../../../../ui/UserListItem';
@@ -24,8 +24,8 @@ interface Props {
 }
 
 export default function MembersModal({ onCancel }: Props): ReactElement {
-  const [members, setMembers] = useState([]);
-  const [memberQuery, setMemberQuery] = useState(null);
+  const [members, setMembers] = useState<Member[]>([]);
+  const [memberQuery, setMemberQuery] = useState<MemberListQuery | null>(null);
 
   const { channel } = useChannelSettingsContext();
   const state = useSendbirdStateContext();
@@ -36,10 +36,10 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
     const memberListQuery = channel?.createMemberListQuery({
       limit: 20,
     });
-    memberListQuery.next().then((members) => {
+    memberListQuery?.next().then((members) => {
       setMembers(members);
     });
-    setMemberQuery(memberListQuery);
+    setMemberQuery(memberListQuery ?? null);
   }, []);
   return (
     <div>
@@ -54,8 +54,7 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
           className="sendbird-more-members__popup-scroll"
           onScroll={useOnScrollPositionChangeDetector({
             onReachedBottom: async () => {
-              const { hasNext } = memberQuery;
-              if (hasNext) {
+              if (memberQuery && memberQuery.hasNext) {
                 memberQuery.next().then((o) => {
                   setMembers([
                     ...members,
@@ -106,15 +105,13 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
                                 user={member}
                                 disable={currentUserId === member.userId}
                                 onChange={(_, member, isOperator) => {
-                                  setMembers(members.map(m => {
-                                    if (m.userId === member.userId) {
-                                      return {
-                                        ...member,
-                                        role: isOperator ? Role.OPERATOR : Role.NONE,
-                                      };
+                                  const newMembers = [...members];
+                                  for (const newMember of newMembers) {
+                                    if (newMember.userId === member.userId) {
+                                      newMember.role = isOperator ? Role.OPERATOR : Role.NONE;
                                     }
-                                    return m;
-                                  }));
+                                  }
+                                  setMembers(newMembers);
                                   closeDropdown();
                                 }}
                                 onError={() => {
@@ -138,15 +135,13 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
                                     channel={channel}
                                     user={member}
                                     onChange={(_, member, isMuted) => {
-                                      setMembers(members.map(m => {
-                                        if (m.userId === member.userId) {
-                                          return {
-                                            ...member,
-                                            isMuted,
-                                          };
+                                      const newMembers = [...members];
+                                      for (const newMember of newMembers) {
+                                        if (newMember.userId === member.userId) {
+                                          newMember.isMuted = isMuted;
                                         }
-                                        return m;
-                                      }));
+                                      }
+                                      setMembers(newMembers);
                                       closeDropdown();
                                     }}
                                     onError={() => {
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx
index b731ca666..c26f2a1e3 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx
@@ -19,9 +19,10 @@ import MutedMembersModal from './MutedMembersModal';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useLocalization } from '../../../../lib/LocalizationContext';
+import { Member } from '@sendbird/chat/groupChannel';
 
 export const MutedMemberList = (): ReactElement => {
-  const [members, setMembers] = useState([]);
+  const [members, setMembers] = useState<Member[]>([]);
   const [hasNext, setHasNext] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const { stringSet } = useLocalization();
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx
index 993496be9..8510d02f4 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx
@@ -13,6 +13,7 @@ import { noop } from '../../../../utils/utils';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useLocalization } from '../../../../lib/LocalizationContext';
+import { Member, MemberListQuery } from '@sendbird/chat/groupChannel';
 import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
 
 interface Props {
@@ -22,8 +23,8 @@ interface Props {
 export default function MutedMembersModal({
   onCancel,
 }: Props): ReactElement {
-  const [members, setMembers] = useState([]);
-  const [memberQuery, setMemberQuery] = useState(null);
+  const [members, setMembers] = useState<Member[]>([]);
+  const [memberQuery, setMemberQuery] = useState<MemberListQuery | null>(null);
 
   const { channel } = useChannelSettingsContext();
   const state = useSendbirdStateContext();
@@ -36,10 +37,10 @@ export default function MutedMembersModal({
       // @ts-ignore
       mutedMemberFilter: 'muted',
     });
-    memberUserListQuery.next().then((members) => {
+    memberUserListQuery?.next().then((members) => {
       setMembers(members);
     });
-    setMemberQuery(memberUserListQuery);
+    setMemberQuery(memberUserListQuery ?? null);
   }, []);
   return (
     <div>
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx
index 4ffc8a9e6..d4870c3df 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx
@@ -17,9 +17,10 @@ import OperatorsModal from './OperatorsModal';
 import AddOperatorsModal from './AddOperatorsModal';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
+import { User } from '@sendbird/chat';
 
 export const OperatorList = (): ReactElement => {
-  const [operators, setOperators] = useState([]);
+  const [operators, setOperators] = useState<User[]>([]);
   const [showMore, setShowMore] = useState(false);
   const [showAdd, setShowAdd] = useState(false);
   const [hasNext, setHasNext] = useState(false);
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx
index 86d3af98c..9d1444854 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx
@@ -14,13 +14,14 @@ import ContextMenu, { MenuItem, MenuItems } from '../../../../ui/ContextMenu';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
+import { OperatorListQuery, User } from '@sendbird/chat';
 import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
 
 interface Props { onCancel?(): void }
 
 export default function OperatorsModal({ onCancel }: Props): ReactElement {
-  const [operators, setOperators] = useState([]);
-  const [operatorQuery, setOperatorQuery] = useState(null);
+  const [operators, setOperators] = useState<User[]>([]);
+  const [operatorQuery, setOperatorQuery] = useState<OperatorListQuery | null>(null);
 
   const { channel } = useChannelSettingsContext();
   const state = useSendbirdStateContext();
@@ -31,10 +32,10 @@ export default function OperatorsModal({ onCancel }: Props): ReactElement {
     const operatorListQuery = channel?.createOperatorListQuery({
       limit: 20,
     });
-    operatorListQuery.next().then((operators) => {
+    operatorListQuery?.next().then((operators) => {
       setOperators(operators);
     });
-    setOperatorQuery(operatorListQuery);
+    setOperatorQuery(operatorListQuery ?? null);
   }, []);
   return (
     <div>
@@ -48,8 +49,7 @@ export default function OperatorsModal({ onCancel }: Props): ReactElement {
           className="sendbird-more-members__popup-scroll"
           onScroll={useOnScrollPositionChangeDetector({
             onReachedBottom: async () => {
-              const { hasNext } = operatorQuery;
-              if (hasNext) {
+              if (operatorQuery && operatorQuery.hasNext) {
                 operatorQuery.next().then((o) => {
                   setOperators([
                     ...operators,
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/index.tsx b/src/modules/ChannelSettings/components/ModerationPanel/index.tsx
index 92970d9cd..c2dbad97a 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/index.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/index.tsx
@@ -40,7 +40,7 @@ export default function ModerationPanel(): ReactElement {
   // https://sendbird.slack.com/archives/G01290GCDCN/p1595922832000900
   // SDK bug - after frozen/unfrozen myRole becomes "none"
   useEffect(() => {
-    setFrozen(channel?.isFrozen);
+    setFrozen(channel?.isFrozen ?? false);
   }, [channel]);
 
   return (
@@ -85,7 +85,7 @@ export default function ModerationPanel(): ReactElement {
             >
               {stringSet.CHANNEL_SETTING__MEMBERS__TITLE}
             </Label>
-            <Badge count={kFormatter(channel?.memberCount)} />
+            <Badge count={channel?.memberCount ? kFormatter(channel.memberCount) : ''}/>
           </>
         )}
         renderContent={() => <MemberList />}
diff --git a/src/modules/ChannelSettings/components/UserListItem/index.tsx b/src/modules/ChannelSettings/components/UserListItem/index.tsx
index ff46e6ecb..d311ac334 100644
--- a/src/modules/ChannelSettings/components/UserListItem/index.tsx
+++ b/src/modules/ChannelSettings/components/UserListItem/index.tsx
@@ -1,5 +1,6 @@
-import React, { ReactElement, useRef, useContext } from 'react';
+import React, { ReactElement, useRef, useContext, ReactNode } from 'react';
 import { User } from '@sendbird/chat';
+import { Member } from '@sendbird/chat/groupChannel';
 
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import { UserProfileContext } from '../../../../lib/UserProfileContext';
@@ -16,21 +17,16 @@ interface ActionProps {
   parentRef: React.RefObject<HTMLInputElement>;
 }
 
-type CustomUser = User & {
-  isMuted: boolean;
-  role: string;
-};
-
 interface Props {
-  user: CustomUser;
+  user: User | Member;
   currentUser?: string;
   className?: string;
-  action?(props: ActionProps): ReactElement;
+  action?(props: ActionProps): ReactNode;
 }
 
 const UserListItem = ({
   user,
-  className,
+  className = '',
   currentUser,
   action,
 }: Props): ReactElement => {
@@ -63,7 +59,7 @@ const UserListItem = ({
               height={24}
             />
             {
-              user.isMuted && (
+              user instanceof Member && user.isMuted && (
                 <MutedAvatarOverlay />
               )
             }
@@ -73,7 +69,7 @@ const UserListItem = ({
           renderUserProfile
             ? renderUserProfile({
               user,
-              currentUserId: currentUser,
+              currentUserId: currentUser ?? '',
               close: closeDropdown,
               avatarRef,
             })
@@ -125,7 +121,7 @@ const UserListItem = ({
         )
       }
       {
-        user.role === 'operator' && (
+        user instanceof Member && user.role === 'operator' && (
           <Label
             className="sendbird-user-list-item--small__operator"
             type={LabelTypography.SUBTITLE_2}
diff --git a/src/modules/ChannelSettings/components/UserPanel/index.tsx b/src/modules/ChannelSettings/components/UserPanel/index.tsx
index c12a9d63c..33aef10fa 100644
--- a/src/modules/ChannelSettings/components/UserPanel/index.tsx
+++ b/src/modules/ChannelSettings/components/UserPanel/index.tsx
@@ -51,7 +51,7 @@ const UserPanel: React.FC = () => {
           {stringSet.CHANNEL_SETTING__MEMBERS__TITLE}
           <Badge
             className={'sendbird-channel-settings__badge'}
-            count={kFormatter(channel?.memberCount)}
+            count={channel ? kFormatter(channel?.memberCount) : ''}
           />
         </Label>
         <Icon
diff --git a/src/modules/ChannelSettings/context/ChannelSettingsProvider.tsx b/src/modules/ChannelSettings/context/ChannelSettingsProvider.tsx
index 3fc748a54..f78913b7f 100644
--- a/src/modules/ChannelSettings/context/ChannelSettingsProvider.tsx
+++ b/src/modules/ChannelSettings/context/ChannelSettingsProvider.tsx
@@ -44,7 +44,7 @@ interface ChannelSettingsProviderInterface {
   onLeaveChannel?(): void;
   overrideInviteUser?(params: OverrideInviteUserType): void;
   onChannelModified?(channel: GroupChannel): void;
-  onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): GroupChannelUpdateParams;
+  onBeforeUpdateChannel?(currentTitle: string, currentImg: File | null, data: string | undefined): GroupChannelUpdateParams;
   queries?: ChannelSettingsQueries;
   setChannelUpdateId(uniqId: string): void;
   forceUpdateUI(): void;
@@ -99,7 +99,7 @@ const ChannelSettingsProvider = ({
       try {
         return await sdkStore.sdk.groupChannel.getChannel(channelUrl);
       } catch (error) {
-        logger.error('ChannelSettings: fetching channel error:', error.message);
+        logger.error('ChannelSettings: fetching channel error:', error);
         throw error;
       }
     },
@@ -142,5 +142,10 @@ const ChannelSettingsProvider = ({
   );
 };
 
-const useChannelSettingsContext = () => React.useContext(ChannelSettingsContext);
+const useChannelSettingsContext = () => {
+  const context = React.useContext(ChannelSettingsContext);
+  if (!context) throw new Error('ChannelSettingsContext not found. Use within the ChannelSettings module');
+
+  return context;
+};
 export { ChannelSettingsProvider, useChannelSettingsContext };
diff --git a/src/modules/CreateChannel/components/CreateChannelUI/index.tsx b/src/modules/CreateChannel/components/CreateChannelUI/index.tsx
index 9795bca85..e96258f2b 100644
--- a/src/modules/CreateChannel/components/CreateChannelUI/index.tsx
+++ b/src/modules/CreateChannel/components/CreateChannelUI/index.tsx
@@ -38,7 +38,7 @@ const CreateChannel: React.FC<CreateChannelUIProps> = (props: CreateChannelUIPro
             userListQuery={userListQuery}
             onCancel={() => {
               setStep(0);
-              onCancel();
+              onCancel?.();
             }}
           />
         )
diff --git a/src/modules/CreateChannel/components/InviteUsers/index.tsx b/src/modules/CreateChannel/components/InviteUsers/index.tsx
index 42f1a1c54..2cb75a0b3 100644
--- a/src/modules/CreateChannel/components/InviteUsers/index.tsx
+++ b/src/modules/CreateChannel/components/InviteUsers/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import type { User } from '@sendbird/chat';
 import type { GroupChannelCreateParams } from '@sendbird/chat/groupChannel';
 
@@ -8,18 +8,11 @@ import { useCreateChannelContext } from '../../context/CreateChannelProvider';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
 import Modal from '../../../../ui/Modal';
-import Label, {
-  LabelColors,
-  LabelTypography,
-} from '../../../../ui/Label';
+import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
 import { ButtonTypes } from '../../../../ui/Button';
 import UserListItem from '../../../../ui/UserListItem';
 
-import {
-  filterUser,
-  setChannelType,
-  createDefaultUserListQuery,
-} from './utils';
+import { createDefaultUserListQuery, filterUser, setChannelType } from './utils';
 import { noop } from '../../../../utils/utils';
 import { UserListQuery } from '../../../../types';
 
@@ -49,7 +42,7 @@ const InviteUsers: React.FC<InviteUsersProps> = ({
   const sdk = globalStore?.stores?.sdkStore?.sdk;
   const idsToFilter = [userId];
   const [users, setUsers] = useState<User[]>([]);
-  const [selectedUsers, setSelectedUsers] = useState({});
+  const [selectedUsers, setSelectedUsers] = useState<Record<string, boolean>>({});
   const { stringSet } = useContext(LocalizationContext);
   const [usersDataSource, setUsersDataSource] = useState<UserListQuery | null>(null);
   const selectedCount = Object.keys(selectedUsers).length;
@@ -58,15 +51,12 @@ const InviteUsers: React.FC<InviteUsersProps> = ({
   const { isMobile } = useMediaQueryContext();
   const [scrollableAreaHeight, setScrollableAreaHeight] = useState<number>(window.innerHeight);
 
-  const userQueryCreator = userListQuery ? userListQuery() : createDefaultUserListQuery({ sdk });
-
   useEffect(() => {
-    const applicationUserListQuery = userQueryCreator;
+    const applicationUserListQuery = userListQuery ? userListQuery() : createDefaultUserListQuery({ sdk });
     setUsersDataSource(applicationUserListQuery);
-    // @ts-ignore
     if (!applicationUserListQuery?.isLoading) {
-      applicationUserListQuery.next().then((users_) => {
-        setUsers(users_);
+      applicationUserListQuery.next().then((it) => {
+        setUsers(it);
       });
     }
   }, []);
diff --git a/src/modules/CreateChannel/components/InviteUsers/utils.ts b/src/modules/CreateChannel/components/InviteUsers/utils.ts
index a4627b8ae..fc7d19a8b 100644
--- a/src/modules/CreateChannel/components/InviteUsers/utils.ts
+++ b/src/modules/CreateChannel/components/InviteUsers/utils.ts
@@ -28,13 +28,12 @@ type CreateDefaultUserListQueryType = {
 export const createDefaultUserListQuery = (
   { sdk, userFilledApplicationUserListQuery }: CreateDefaultUserListQueryType,
 ): ApplicationUserListQuery => {
-  if (sdk?.createApplicationUserListQuery) {
-    const params = sdk?.createApplicationUserListQuery();
-    if (userFilledApplicationUserListQuery) {
-      Object.keys(userFilledApplicationUserListQuery).forEach((key) => {
-        params[key] = userFilledApplicationUserListQuery[key];
-      });
-    }
-    return params;
+  const params = sdk.createApplicationUserListQuery();
+  if (userFilledApplicationUserListQuery) {
+    Object.keys(userFilledApplicationUserListQuery).forEach((key) => {
+      // @ts-ignore
+      params[key] = userFilledApplicationUserListQuery[key];
+    });
   }
+  return params;
 };
diff --git a/src/modules/CreateChannel/components/SelectChannelType.tsx b/src/modules/CreateChannel/components/SelectChannelType.tsx
index 53ac1adeb..9394d7667 100644
--- a/src/modules/CreateChannel/components/SelectChannelType.tsx
+++ b/src/modules/CreateChannel/components/SelectChannelType.tsx
@@ -42,7 +42,7 @@ const SelectChannelType: React.FC<SelectChannelTypeProps> = (props: SelectChanne
     <Modal
       titleText={stringSet?.MODAL__CREATE_CHANNEL__TITLE}
       hideFooter
-      onCancel={() => { onCancel(); }}
+      onCancel={() => { onCancel?.(); }}
       className="sendbird-add-channel__modal"
     >
       <div className="sendbird-add-channel__rectangle-wrap">
diff --git a/src/modules/CreateChannel/context/CreateChannelProvider.tsx b/src/modules/CreateChannel/context/CreateChannelProvider.tsx
index 45e1c9ce9..94bb70028 100644
--- a/src/modules/CreateChannel/context/CreateChannelProvider.tsx
+++ b/src/modules/CreateChannel/context/CreateChannelProvider.tsx
@@ -3,14 +3,14 @@ import { User } from '@sendbird/chat';
 import type {
   GroupChannel,
   GroupChannelCreateParams,
-  SendbirdGroupChat,
 } from '@sendbird/chat/groupChannel';
 
 import { getCreateGroupChannel } from '../../../lib/selectors';
 import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
 import { CHANNEL_TYPE } from '../types';
+import { SendbirdChatType } from '../../../lib/types';
 
-const CreateChannelContext = React.createContext(undefined);
+const CreateChannelContext = React.createContext<CreateChannelContextInterface | null>(null);
 
 export interface UserListQuery {
   hasNext?: boolean;
@@ -57,7 +57,7 @@ export interface CreateChannelProviderProps {
 type CreateChannel = (channelParams: GroupChannelCreateParams) => Promise<GroupChannel>;
 
 export interface CreateChannelContextInterface {
-  sdk: SendbirdGroupChat;
+  sdk: SendbirdChatType;
   createChannel: CreateChannel;
   userListQuery?(): UserListQuery;
 
@@ -110,6 +110,7 @@ const CreateChannelProvider: React.FC<CreateChannelProviderProps> = (props: Crea
 
   return (
     <CreateChannelContext.Provider value={{
+      sdk: store.stores.sdkStore.sdk,
       createChannel: getCreateGroupChannel(store),
       onCreateChannelClick,
       onBeforeCreateChannel,
@@ -127,9 +128,11 @@ const CreateChannelProvider: React.FC<CreateChannelProviderProps> = (props: Crea
   );
 };
 
-const useCreateChannelContext = (): CreateChannelContextInterface => (
-  React.useContext(CreateChannelContext)
-);
+const useCreateChannelContext = () => {
+  const context = React.useContext(CreateChannelContext);
+  if (!context) throw new Error('CreateChannelContext not found. Use within the CreateChannel module.');
+  return context;
+};
 
 export {
   CreateChannelProvider,
diff --git a/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx b/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx
index 74cc715c5..adaa873cc 100644
--- a/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx
+++ b/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx
@@ -23,10 +23,10 @@ function CreateOpenChannelUI({
   renderProfileInput,
 }: CreateOpenChannelUIProps): React.ReactElement {
   const [newFile, setNewFile] = useState(null);
-  const [currentImage, setCurrentImg] = useState(null);
+  const [currentImage, setCurrentImg] = useState<string | null>(null);
   const inputFormRef = useRef(null);
-  const inputFileRef = useRef(null);
-  const inputTextRef = useRef(null);
+  const inputFileRef = useRef<HTMLInputElement | null>(null);
+  const inputTextRef = useRef<HTMLInputElement | null>(null);
   const { stringSet } = useContext(LocalizationContext);
   const {
     logger,
@@ -49,9 +49,9 @@ function CreateOpenChannelUI({
           }
           createNewOpenChannel({
             name: channelName,
-            coverUrlOrImage: newFile,
+            coverUrlOrImage: newFile ?? undefined,
           });
-          closeModal();
+          closeModal?.();
         }}
       >
         <>
@@ -91,14 +91,19 @@ function CreateOpenChannelUI({
                   accept="image/gif, image/jpeg, image/png"
                   style={{ display: 'none' }}
                   onChange={(e) => {
-                    setCurrentImg(URL.createObjectURL(e.target.files[0]));
-                    setNewFile(e.target.files[0]);
-                    inputFileRef.current.value = '';
+                    if (e.target.files) {
+                      setCurrentImg(URL.createObjectURL(e.target.files[0]));
+                      setNewFile(e.target.files[0]);
+                    }
+
+                    if (inputFileRef.current) {
+                      inputFileRef.current.value = '';
+                    }
                   }}
                 />
                 <TextButton
                   className="sendbird-create-open-channel-ui__profile-input__img-section__button"
-                  onClick={() => inputFileRef.current.click()}
+                  onClick={() => inputFileRef.current?.click()}
                   disableUnderline
                 >
                   <Label
diff --git a/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx b/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx
index d4850c03d..65cb47694 100644
--- a/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx
+++ b/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx
@@ -15,12 +15,7 @@ export interface CreateOpenChannelContextInterface extends CreateOpenChannelProv
   createNewOpenChannel: (props: CreateNewOpenChannelCallbackProps) => void;
 }
 
-const CreateOpenChannelContext = React.createContext<CreateOpenChannelContextInterface>({
-  sdk: null,
-  sdkInitialized: false,
-  logger: null,
-  createNewOpenChannel: null,
-});
+const CreateOpenChannelContext = React.createContext<CreateOpenChannelContextInterface | null>(null);
 
 export interface CreateOpenChannelProviderProps {
   className?: string;
@@ -44,13 +39,13 @@ export const CreateOpenChannelProvider: React.FC<CreateOpenChannelProviderProps>
     const { name, coverUrlOrImage } = params;
     if (sdkInitialized) {
       const params = {} as OpenChannelCreateParams;
-      params.operatorUserIds = [sdk?.currentUser?.userId];
+      params.operatorUserIds = sdk?.currentUser?.userId ? [sdk.currentUser.userId] : [];
       params.name = name;
       params.coverUrlOrImage = coverUrlOrImage;
       sdk.openChannel.createChannel(onBeforeCreateChannel?.(params) || params)
         .then((openChannel) => {
           logger.info('CreateOpenChannel: Succeeded creating openChannel', openChannel);
-          onCreateChannel(openChannel);
+          onCreateChannel?.(openChannel);
         })
         .catch((err) => {
           logger.warning('CreateOpenChannel: Failed creating openChannel', err);
@@ -75,6 +70,8 @@ export const CreateOpenChannelProvider: React.FC<CreateOpenChannelProviderProps>
   );
 };
 
-export const useCreateOpenChannelContext = (): CreateOpenChannelContextInterface => (
-  React.useContext(CreateOpenChannelContext)
-);
+export const useCreateOpenChannelContext = () => {
+  const context = React.useContext(CreateOpenChannelContext);
+  if (!context) throw new Error('CreateOpenChannelContext not found. Use within the CreateOpenChannel module.');
+  return context;
+};
diff --git a/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx b/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx
index b95f560b8..74a53f952 100644
--- a/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx
+++ b/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx
@@ -11,8 +11,8 @@ import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 export interface EditUserProfileUIViewProps {
   formRef: MutableRefObject<any>;
   inputRef: MutableRefObject<any>;
-  onThemeChange: (theme: string) => void;
   setProfileImage: Dispatch<File | null>;
+  onThemeChange?: (theme: string) => void;
 }
 export const EditUserProfileUIView = ({
   formRef,
@@ -25,8 +25,8 @@ export const EditUserProfileUIView = ({
   const user = stores.userStore?.user;
   const { stringSet } = useLocalization();
 
-  const [currentImg, setCurrentImg] = useState(null);
-  const hiddenInputRef = useRef(null);
+  const [currentImg, setCurrentImg] = useState<string | null>(null);
+  const hiddenInputRef = useRef<HTMLInputElement>(null);
 
   return (
     <form
@@ -51,15 +51,20 @@ export const EditUserProfileUIView = ({
           accept="image/gif, image/jpeg, image/png"
           style={{ display: 'none' }}
           onChange={(e) => {
-            setCurrentImg(URL.createObjectURL(e.target.files[0]));
-            setProfileImage(e.target.files[0]);
-            hiddenInputRef.current.value = '';
+            if (e.target.files) {
+              setCurrentImg(URL.createObjectURL(e.target.files[0]));
+              setProfileImage(e.target.files[0]);
+            }
+
+            if (hiddenInputRef.current) {
+              hiddenInputRef.current.value = '';
+            }
           }}
         />
         <TextButton
           className="sendbird-edit-user-profile__img__avatar-button"
           disableUnderline
-          onClick={() => hiddenInputRef.current.click()}
+          onClick={() => hiddenInputRef.current?.click()}
         >
           <Label
             type={LabelTypography.BUTTON_1}
diff --git a/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx b/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
index 76c1ad2bf..9fffc65ee 100644
--- a/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
+++ b/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
@@ -22,7 +22,7 @@ interface HandleUpdateUserInfoParams {
   globalContext: SendBirdState;
   formRef: MutableRefObject<any>;
   inputRef: MutableRefObject<any>;
-  profileImage: File;
+  profileImage: File | null;
   onEditProfile?: (user: User) => void;
 }
 const handleUpdateUserInfo = ({
@@ -43,7 +43,7 @@ const handleUpdateUserInfo = ({
   }
   sdk?.updateCurrentUserInfo({
     nickname: inputRef?.current?.value,
-    profileImage: profileImage,
+    profileImage: profileImage ?? undefined,
   }).then((updatedUser) => {
     userDispatcher({ type: USER_ACTIONS.UPDATE_USER_INFO, payload: updatedUser });
     onEditProfile?.(updatedUser);
@@ -51,7 +51,7 @@ const handleUpdateUserInfo = ({
 };
 
 export interface UseEditUserProfileUIStateParams {
-  onEditProfile: (user: User) => void;
+  onEditProfile?: (user: User) => void;
 }
 export const useEditUserProfileUISates = ({
   onEditProfile,
@@ -95,7 +95,6 @@ export const EditUserProfileUI = () => {
     updateUserInfo,
     setProfileImage,
   } = useEditUserProfileUISates({ onEditProfile });
-
   return (
     <Modal
       titleText={stringSet.EDIT_PROFILE__TITLE}
diff --git a/src/modules/EditUserProfile/context/EditUserProfileProvider.tsx b/src/modules/EditUserProfile/context/EditUserProfileProvider.tsx
index 1dfce09d4..eec43bfc1 100644
--- a/src/modules/EditUserProfile/context/EditUserProfileProvider.tsx
+++ b/src/modules/EditUserProfile/context/EditUserProfileProvider.tsx
@@ -1,7 +1,7 @@
 import type { User } from '@sendbird/chat';
-import React, { useMemo } from 'react';
+import React from 'react';
 
-const EditUserProfileProviderContext = React.createContext(undefined);
+const EditUserProfileProviderContext = React.createContext<EditUserProfileProviderInterface | null>(null);
 
 export interface EditUserProfileProps {
   children?: React.ReactElement;
@@ -16,32 +16,15 @@ export interface EditUserProfileProviderInterface {
   onEditProfile?(updatedUser: User): void;
 }
 
-const EditUserProfileProvider: React.FC<EditUserProfileProps> = (props: EditUserProfileProps) => {
-  const {
-    children,
-    onEditProfile,
-    onCancel,
-    onThemeChange,
-  } = props;
-
-  const value = useMemo(() => {
-    return {
-      onEditProfile,
-      onCancel,
-      onThemeChange,
-    };
-  }, []);
-
-  return (
-    <EditUserProfileProviderContext.Provider value={value}>
-      {children}
-    </EditUserProfileProviderContext.Provider>
-  );
+const EditUserProfileProvider = ({ children, ...props }: EditUserProfileProps) => {
+  return <EditUserProfileProviderContext.Provider value={props}>{children}</EditUserProfileProviderContext.Provider>;
 };
 
-const useEditUserProfileContext = (): EditUserProfileProviderInterface => (
-  React.useContext(EditUserProfileProviderContext)
-);
+const useEditUserProfileContext = () => {
+  const context = React.useContext(EditUserProfileProviderContext);
+  if (!context) throw new Error('EditUserProfileContext not found. Use within the EditUserProfile module.');
+  return context;
+};
 
 export {
   EditUserProfileProvider,
diff --git a/src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx b/src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx
index 4c2b99489..32c0729b7 100644
--- a/src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx
+++ b/src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx
@@ -39,10 +39,10 @@ export const FileViewerView = ({
       onCancel={onCancel}
       onDelete={() => deleteMessage(message).then(() => onCancel())}
       isByMe={config.userId === userId}
-      disableDelete={threadInfo?.replyCount > 0}
+      disableDelete={threadInfo?.replyCount ? threadInfo.replyCount > 0 : false}
       onDownloadClick={onDownloadClick}
     />,
-    document.getElementById(MODAL_ROOT),
+    document.getElementById(MODAL_ROOT) as Element,
   );
 };
 
diff --git a/src/modules/GroupChannel/components/FileViewer/index.tsx b/src/modules/GroupChannel/components/FileViewer/index.tsx
index c8eea8f9c..a5219b631 100644
--- a/src/modules/GroupChannel/components/FileViewer/index.tsx
+++ b/src/modules/GroupChannel/components/FileViewer/index.tsx
@@ -19,9 +19,8 @@ export const FileViewer = (props: FileViewerProps) => {
       {...props}
       deleteMessage={deleteMessage}
       onDownloadClick={async (e) => {
-        if (!onBeforeDownloadFileMessage) {
-          return null;
-        }
+        if (!onBeforeDownloadFileMessage) return;
+
         try {
           const allowDownload = await onBeforeDownloadFileMessage({ message: props.message });
           if (!allowDownload) {
diff --git a/src/modules/GroupChannel/components/GroupChannelUI/index.tsx b/src/modules/GroupChannel/components/GroupChannelUI/index.tsx
index fa9c4e685..06e2887c6 100644
--- a/src/modules/GroupChannel/components/GroupChannelUI/index.tsx
+++ b/src/modules/GroupChannel/components/GroupChannelUI/index.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import { GroupChannelUIBasicProps, GroupChannelUIView } from './GroupChannelUIView';
 
-import GroupChannelHeader from '../GroupChannelHeader';
-import MessageList from '../MessageList';
+import GroupChannelHeader, { GroupChannelHeaderProps } from '../GroupChannelHeader';
+import MessageList, { GroupChannelMessageListProps } from '../MessageList';
 import MessageInputWrapper from '../MessageInputWrapper';
 import { deleteNullish } from '../../../../utils/utils';
 
@@ -16,8 +16,8 @@ export const GroupChannelUI = (props: GroupChannelUIProps) => {
 
   // Inject components to presentation layer
   const {
-    renderChannelHeader = (props) => <GroupChannelHeader {...props} />,
-    renderMessageList = (props) => <MessageList {...props} className="sendbird-conversation__message-list" />,
+    renderChannelHeader = (props: GroupChannelHeaderProps) => <GroupChannelHeader {...props} />,
+    renderMessageList = (props: GroupChannelMessageListProps) => <MessageList {...props} className="sendbird-conversation__message-list" />,
     renderMessageInput = () => <MessageInputWrapper {...props} />,
   } = deleteNullish(props);
 
diff --git a/src/modules/GroupChannel/components/Message/MessageView.tsx b/src/modules/GroupChannel/components/Message/MessageView.tsx
index f56b1e3b3..6e07d123b 100644
--- a/src/modules/GroupChannel/components/Message/MessageView.tsx
+++ b/src/modules/GroupChannel/components/Message/MessageView.tsx
@@ -62,17 +62,17 @@ export interface MessageViewProps extends MessageProps {
 
   editInputDisabled: boolean;
   shouldRenderSuggestedReplies: boolean;
-  isReactionEnabled: boolean;
+  isReactionEnabled?: boolean;
   replyType: ReplyType;
   threadReplySelectType: ThreadReplySelectType;
   nicknamesMap: Map<string, string>;
 
-  renderUserMentionItem: (props: { user: User }) => React.ReactElement;
+  renderUserMentionItem?: (props: { user: User }) => React.ReactElement;
   scrollToMessage: (createdAt: number, messageId: number) => void;
   toggleReaction: (message: SendableMessageType, emojiKey: string, isReacted: boolean) => void;
-  setQuoteMessage: React.Dispatch<React.SetStateAction<SendableMessageType>>;
-  onQuoteMessageClick: (params: { message: SendableMessageType }) => void;
-  onReplyInThreadClick: (params: { message: SendableMessageType }) => void;
+  setQuoteMessage: React.Dispatch<React.SetStateAction<SendableMessageType | null>>;
+  onQuoteMessageClick?: (params: { message: SendableMessageType }) => void;
+  onReplyInThreadClick?: (params: { message: SendableMessageType }) => void;
 
   sendUserMessage: (params: UserMessageCreateParams) => void;
   updateUserMessage: (messageId: number, params: UserMessageUpdateParams) => void;
@@ -87,13 +87,13 @@ export interface MessageViewProps extends MessageProps {
    */
   onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
 
-  animatedMessageId: number;
-  setAnimatedMessageId: React.Dispatch<React.SetStateAction<number>>;
+  animatedMessageId: number | null;
+  setAnimatedMessageId: React.Dispatch<React.SetStateAction<number | null>>;
   onMessageAnimated?: () => void;
   /** @deprecated * */
-  highLightedMessageId?: number;
+  highLightedMessageId?: number | null;
   /** @deprecated * */
-  setHighLightedMessageId?: React.Dispatch<React.SetStateAction<number>>;
+  setHighLightedMessageId?: React.Dispatch<React.SetStateAction<number | null>>;
   /** @deprecated * */
   onMessageHighlighted?: () => void;
   usedInLegacy?: boolean;
@@ -141,8 +141,8 @@ const MessageView = (props: MessageViewProps) => {
   const {
     renderUserMentionItem,
     renderMessage,
-    renderMessageContent = (props) => <MessageContent {...props} />,
-    renderSuggestedReplies = (props) => <SuggestedReplies {...props} />,
+    renderMessageContent = (props: MessageContentProps) => <MessageContent {...props} />,
+    renderSuggestedReplies = (props: SuggestedRepliesProps) => <SuggestedReplies {...props} />,
     renderCustomSeparator,
     renderEditInput,
     renderFileViewer,
@@ -167,11 +167,11 @@ const MessageView = (props: MessageViewProps) => {
   const [showFileViewer, setShowFileViewer] = useState(false);
   const [isAnimated, setIsAnimated] = useState(false);
   const [mentionNickname, setMentionNickname] = useState('');
-  const [mentionedUsers, setMentionedUsers] = useState([]);
-  const [mentionedUserIds, setMentionedUserIds] = useState([]);
-  const [messageInputEvent, setMessageInputEvent] = useState(null);
-  const [selectedUser, setSelectedUser] = useState(null);
-  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
+  const [mentionedUsers, setMentionedUsers] = useState<User[]>([]);
+  const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([]);
+  const [messageInputEvent, setMessageInputEvent] = useState<React.KeyboardEvent<HTMLDivElement> | null>(null);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState<User[]>([]);
   const editMessageInputRef = useRef(null);
   const messageScrollRef = useRef(null);
   const displaySuggestedMentionList = isOnline
@@ -222,7 +222,7 @@ const MessageView = (props: MessageViewProps) => {
   }, []);
 
   useLayoutEffect(() => {
-    const timeouts = [];
+    const timeouts: ReturnType<typeof setTimeout>[] = [];
 
     if (animatedMessageId === message.messageId && messageScrollRef?.current) {
       timeouts.push(
@@ -296,7 +296,7 @@ const MessageView = (props: MessageViewProps) => {
           })
         }
         {/* Modal */}
-        {showRemove && renderRemoveMessageModal({ message, onCancel: () => setShowRemove(false) })}
+        {showRemove && renderRemoveMessageModal?.({ message, onCancel: () => setShowRemove(false) })}
         {showFileViewer && renderFileViewer({ message: message as FileMessage, onCancel: () => setShowFileViewer(false) })}
       </>
     );
@@ -310,7 +310,7 @@ const MessageView = (props: MessageViewProps) => {
             <SuggestedMentionListView
               currentChannel={channel}
               targetNickname={mentionNickname}
-              inputEvent={messageInputEvent}
+              inputEvent={messageInputEvent ?? undefined}
               renderUserMentionItem={renderUserMentionItem}
               onUserItemClick={(user) => {
                 if (user) {
diff --git a/src/modules/GroupChannel/components/Message/index.tsx b/src/modules/GroupChannel/components/Message/index.tsx
index 2a1cc7ea3..e36bfa1c9 100644
--- a/src/modules/GroupChannel/components/Message/index.tsx
+++ b/src/modules/GroupChannel/components/Message/index.tsx
@@ -8,6 +8,7 @@ import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import MessageView, { MessageProps } from './MessageView';
 import FileViewer from '../FileViewer';
 import RemoveMessageModal from '../RemoveMessageModal';
+import { ThreadReplySelectType } from '../../context/const';
 
 export const Message = (props: MessageProps): React.ReactElement => {
   const { config, emojiManager } = useSendbirdStateContext();
@@ -51,15 +52,18 @@ export const Message = (props: MessageProps): React.ReactElement => {
   return (
     <MessageView
       {...props}
-      channel={currentChannel}
+      channel={currentChannel!}
       emojiContainer={emojiManager.emojiContainer}
       editInputDisabled={
-        !initialized || isDisabledBecauseFrozen(currentChannel) || isDisabledBecauseMuted(currentChannel) || !config.isOnline
+        !initialized
+        || isDisabledBecauseFrozen(currentChannel ?? undefined)
+        || isDisabledBecauseMuted(currentChannel ?? undefined)
+        || !config.isOnline
       }
       shouldRenderSuggestedReplies={shouldRenderSuggestedReplies}
-      isReactionEnabled={isReactionEnabled}
-      replyType={replyType}
-      threadReplySelectType={threadReplySelectType}
+      isReactionEnabled={isReactionEnabled ?? false}
+      replyType={replyType ?? 'NONE'}
+      threadReplySelectType={threadReplySelectType ?? ThreadReplySelectType.PARENT}
       nicknamesMap={nicknamesMap}
       renderUserMentionItem={renderUserMentionItem}
       scrollToMessage={scrollToMessage}
@@ -70,7 +74,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
       sendUserMessage={sendUserMessage}
       updateUserMessage={updateUserMessage}
       resendMessage={resendMessage}
-      deleteMessage={deleteMessage}
+      deleteMessage={deleteMessage as any}
       animatedMessageId={animatedMessageId}
       setAnimatedMessageId={setAnimatedMessageId}
       onMessageAnimated={onMessageAnimated}
diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
index f27f97c81..d4958be8e 100644
--- a/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
+++ b/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
@@ -37,7 +37,7 @@ export interface MessageInputWrapperViewProps {
   loading: boolean;
   quoteMessage: SendableMessageType | null;
   setQuoteMessage: React.Dispatch<React.SetStateAction<SendableMessageType | null>>;
-  messageInputRef: React.MutableRefObject<HTMLDivElement>;
+  messageInputRef: React.RefObject<HTMLDivElement>;
   sendUserMessage: (params: UserMessageCreateParams) => Promise<UserMessage> | void;
   sendFileMessage: (params: FileMessageCreateParams) => Promise<FileMessage>;
   sendVoiceMessage: (params: FileMessageCreateParams, duration: number) => Promise<FileMessage>;
@@ -52,7 +52,7 @@ export interface MessageInputWrapperViewProps {
 
 export const MessageInputWrapperView = React.forwardRef((
   props: MessageInputWrapperViewProps,
-  ref: React.MutableRefObject<any>,
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) => {
   // Props
   const {
@@ -88,11 +88,11 @@ export const MessageInputWrapperView = React.forwardRef((
 
   // States
   const [mentionNickname, setMentionNickname] = useState('');
-  const [mentionedUsers, setMentionedUsers] = useState([]);
-  const [mentionedUserIds, setMentionedUserIds] = useState([]);
-  const [selectedUser, setSelectedUser] = useState(null);
-  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
-  const [messageInputEvent, setMessageInputEvent] = useState(null);
+  const [mentionedUsers, setMentionedUsers] = useState<User[]>([]);
+  const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([]);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState<User[]>([]);
+  const [messageInputEvent, setMessageInputEvent] = useState<React.KeyboardEvent<HTMLDivElement> | null>(null);
   const [showVoiceMessageInput, setShowVoiceMessageInput] = useState(false);
 
   // Conditions
@@ -106,7 +106,7 @@ export const MessageInputWrapperView = React.forwardRef((
     && isMentionEnabled
     && mentionNickname.length > 0
     && !isBroadcast;
-  const mentionNodes = useDirtyGetMentions({ ref: ref || messageInputRef }, { logger });
+  const mentionNodes = useDirtyGetMentions({ ref: (ref || messageInputRef) as any }, { logger });
   const ableMention = mentionNodes?.length < maxMentionCount;
 
   // Operate states
@@ -137,7 +137,7 @@ export const MessageInputWrapperView = React.forwardRef((
   const handleUploadFiles = useHandleUploadFiles({
     sendFileMessage,
     sendMultipleFilesMessage,
-    quoteMessage,
+    quoteMessage: quoteMessage ?? undefined,
   }, { logger });
 
   if (isBroadcast && !isOperator) {
@@ -151,7 +151,7 @@ export const MessageInputWrapperView = React.forwardRef((
         <SuggestedMentionList
           currentChannel={currentChannel}
           targetNickname={mentionNickname}
-          inputEvent={messageInputEvent}
+          inputEvent={messageInputEvent ?? undefined}
           renderUserMentionItem={renderUserMentionItem}
           onUserItemClick={(user) => {
             if (user) {
@@ -179,7 +179,7 @@ export const MessageInputWrapperView = React.forwardRef((
       )}
       {showVoiceMessageInput ? (
         <VoiceMessageInputWrapper
-          channel={currentChannel}
+          channel={currentChannel ?? undefined}
           onSubmitClick={(recordedFile, duration) => {
             sendVoiceMessage({ file: recordedFile, parentMessageId: quoteMessage?.messageId }, duration);
             setQuoteMessage(null);
@@ -192,7 +192,7 @@ export const MessageInputWrapperView = React.forwardRef((
       ) : (
         <MessageInput
           className="sendbird-message-input-wrapper__message-input"
-          channel={currentChannel}
+          channel={currentChannel as GroupChannel}
           channelUrl={currentChannel?.url}
           isMobile={isMobile}
           acceptableMimeTypes={acceptableMimeTypes}
@@ -207,10 +207,10 @@ export const MessageInputWrapperView = React.forwardRef((
           placeholder={
             (quoteMessage && stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER)
             || ((disabled || isDisabledBecauseFrozen(currentChannel)) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)
-            || (isDisabledBecauseMuted(currentChannel)
-              && (isMobile ? stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT : stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED))
+            || (isDisabledBecauseMuted(currentChannel) && (isMobile ? stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT : stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED))
+            || undefined
           }
-          ref={ref || messageInputRef}
+          ref={(ref || messageInputRef) as any}
           disabled={isMessageInputDisabled}
           renderFileUploadIcon={renderFileUploadIcon}
           renderSendMessageIcon={renderSendMessageIcon}
diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/VoiceMessageInputWrapper.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/VoiceMessageInputWrapper.tsx
index 34a90c997..5b7a57a39 100644
--- a/src/modules/GroupChannel/components/MessageInputWrapper/VoiceMessageInputWrapper.tsx
+++ b/src/modules/GroupChannel/components/MessageInputWrapper/VoiceMessageInputWrapper.tsx
@@ -12,7 +12,6 @@ import { VoiceMessageInputStatus } from '../../../../ui/VoiceMessageInput/types'
 import Modal from '../../../../ui/Modal';
 import Button, { ButtonSizes, ButtonTypes } from '../../../../ui/Button';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
-import { VOICE_RECORDER_DEFAULT_MIN } from '../../../../utils/consts';
 import { VOICE_PLAYER_STATUS } from '../../../../hooks/VoicePlayer/dux/initialState';
 import uuidv4 from '../../../../utils/uuid';
 
@@ -28,14 +27,13 @@ export const VoiceMessageInputWrapper = ({
   onSubmitClick,
 }: VoiceMessageInputWrapperProps): React.ReactElement => {
   const uuid = useRef<string>(uuidv4()).current;
-  const [audioFile, setAudioFile] = useState<File>(null);
+  const [audioFile, setAudioFile] = useState<File | null>(null);
   const [voiceInputState, setVoiceInputState] = useState<VoiceMessageInputStatus>(VoiceMessageInputStatus.READY_TO_RECORD);
   const [isSubmitted, setSubmit] = useState(false);
   const [isDisabled, setDisabled] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const { stringSet } = useLocalization();
   const { config } = useSendbirdStateContext();
-  const minRecordingTime = config?.voiceRecord?.minRecordingTime || VOICE_RECORDER_DEFAULT_MIN;
   const {
     start,
     stop,
@@ -54,7 +52,7 @@ export const VoiceMessageInputWrapper = ({
   const voicePlayer = useVoicePlayer({
     channelUrl: channel?.url,
     key: uuid,
-    audioFile: audioFile,
+    audioFile: audioFile ?? undefined,
   });
   const {
     play,
@@ -76,7 +74,7 @@ export const VoiceMessageInputWrapper = ({
   // call onSubmitClick when submit button is clicked and recorded audio file is created
   useEffect(() => {
     if (isSubmitted && audioFile) {
-      onSubmitClick(audioFile, recordingTime);
+      onSubmitClick?.(audioFile, recordingTime);
       setSubmit(false);
       setAudioFile(null);
     }
@@ -85,7 +83,7 @@ export const VoiceMessageInputWrapper = ({
   // operate which control button should be displayed
   useEffect(() => {
     if (audioFile) {
-      if (recordingTime < minRecordingTime) {
+      if (recordingTime < config.voiceRecord.minRecordingTime) {
         setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
         setAudioFile(null);
       } else if (playingStatus === VOICE_PLAYER_STATUS.PLAYING) {
@@ -103,7 +101,7 @@ export const VoiceMessageInputWrapper = ({
         maximumValue={recordingStatus === VoiceRecorderStatus.COMPLETED ? recordingTime : recordingLimit}
         currentType={voiceInputState}
         onCancelClick={() => {
-          onCancelClick();
+          onCancelClick?.();
           cancel();
           stopVoicePlayer();
         }}
@@ -125,7 +123,7 @@ export const VoiceMessageInputWrapper = ({
               break;
             }
             case VoiceMessageInputStatus.RECORDING: {
-              if (recordingTime >= minRecordingTime && !isDisabled) {
+              if (recordingTime >= config.voiceRecord.minRecordingTime && !isDisabled) {
                 stop();
               } else if (isDisabled) {
                 cancel();
@@ -158,9 +156,9 @@ export const VoiceMessageInputWrapper = ({
             }
             hideFooter
             isCloseOnClickOutside
-            onCancel={() => {
+            onClose={() => {
               setShowModal(false);
-              onCancelClick();
+              onCancelClick?.();
             }}
           >
             <div className="sendbird-voice-message-input-wrapper-alert__body">
@@ -170,7 +168,7 @@ export const VoiceMessageInputWrapper = ({
                 size={ButtonSizes.BIG}
                 onClick={() => {
                   setShowModal(false);
-                  onCancelClick();
+                  onCancelClick?.();
                 }}
               >
                 {stringSet.BUTTON__OK}
diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx
index fd14a0881..72a20a576 100644
--- a/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx
+++ b/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx
@@ -25,14 +25,14 @@ export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
   const lastMessage = currentChannel?.lastMessage;
   const isLastMessageSuggestedRepliesEnabled = useIIFE(() => {
     if (!config?.groupChannel?.enableSuggestedReplies) return false;
-    if (getSuggestedReplies(lastMessage).length === 0) return false;
+    if (getSuggestedReplies(lastMessage ?? undefined).length === 0) return false;
     const lastMessageInContext = messages[messages.length - 1];
     if (isSendableMessage(lastMessageInContext) && lastMessageInContext.sendingStatus !== 'succeeded') return false;
 
     return true;
   });
   const disableMessageInput = props.disabled
-    || isLastMessageSuggestedRepliesEnabled && !!lastMessage.extendedMessagePayload?.['disable_chat_input'];
+    || isLastMessageSuggestedRepliesEnabled && !!lastMessage?.extendedMessagePayload?.['disable_chat_input'];
 
   return (
     <MessageInputWrapperView
diff --git a/src/modules/GroupChannel/components/MessageList/getMessagePartsInfo.ts b/src/modules/GroupChannel/components/MessageList/getMessagePartsInfo.ts
index c5e28956a..282dd543e 100644
--- a/src/modules/GroupChannel/components/MessageList/getMessagePartsInfo.ts
+++ b/src/modules/GroupChannel/components/MessageList/getMessagePartsInfo.ts
@@ -7,11 +7,11 @@ import { CoreMessageType } from '../../../../utils';
 
 export interface GetMessagePartsInfoProps {
   allMessages: Array<CoreMessageType>;
-  isMessageGroupingEnabled: boolean;
+  isMessageGroupingEnabled?: boolean;
   currentIndex: number;
   currentMessage: CoreMessageType;
-  currentChannel: GroupChannel;
-  replyType: string;
+  currentChannel?: GroupChannel | null;
+  replyType?: string;
 }
 
 interface OutPuts {
@@ -27,7 +27,7 @@ export const getMessagePartsInfo = ({
   allMessages = [],
   isMessageGroupingEnabled = true,
   currentIndex = 0,
-  currentMessage = null,
+  currentMessage,
   currentChannel = null,
   replyType = '',
 }: GetMessagePartsInfoProps): OutPuts => {
diff --git a/src/modules/GroupChannel/components/MessageList/index.tsx b/src/modules/GroupChannel/components/MessageList/index.tsx
index a99b29e98..ea153f90c 100644
--- a/src/modules/GroupChannel/components/MessageList/index.tsx
+++ b/src/modules/GroupChannel/components/MessageList/index.tsx
@@ -4,7 +4,7 @@ import type { Member } from '@sendbird/chat/groupChannel';
 import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 
 import { CoreMessageType, isSendableMessage } from '../../../../utils';
-import { EveryMessage, TypingIndicatorType } from '../../../../types';
+import { EveryMessage, RenderMessageParamsType, TypingIndicatorType } from '../../../../types';
 
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import Icon, { IconColors, IconTypes } from '../../../../ui/Icon';
@@ -56,7 +56,7 @@ export interface GroupChannelMessageListProps {
 export const MessageList = (props: GroupChannelMessageListProps) => {
   const { className = '' } = props;
   const {
-    renderMessage = (props) => <Message {...props} />,
+    renderMessage = (props:RenderMessageParamsType) => <Message {...props} />,
     renderMessageContent,
     renderSuggestedReplies,
     renderCustomSeparator,
@@ -163,11 +163,11 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
             {messages.map((message, idx) => {
               const { chainTop, chainBottom, hasSeparator } = getMessagePartsInfo({
                 allMessages: messages as CoreMessageType[],
-                replyType,
-                isMessageGroupingEnabled,
+                replyType: replyType ?? 'NONE',
+                isMessageGroupingEnabled: isMessageGroupingEnabled ?? false,
                 currentIndex: idx,
                 currentMessage: message as CoreMessageType,
-                currentChannel,
+                currentChannel: currentChannel!,
               });
               const isOutgoingMessage = isSendableMessage(message) && message.sender.userId === store.config.userId;
               return (
diff --git a/src/modules/GroupChannel/components/RemoveMessageModal/RemoveMessageModalView.tsx b/src/modules/GroupChannel/components/RemoveMessageModal/RemoveMessageModalView.tsx
index b0ceaec03..44bf04f54 100644
--- a/src/modules/GroupChannel/components/RemoveMessageModal/RemoveMessageModalView.tsx
+++ b/src/modules/GroupChannel/components/RemoveMessageModal/RemoveMessageModalView.tsx
@@ -30,7 +30,7 @@ export const RemoveMessageModalView = (props: RemoveMessageModalViewProps) => {
   return (
     <Modal
       type={ButtonTypes.DANGER}
-      disabled={message?.threadInfo?.replyCount > 0}
+      disabled={message?.threadInfo?.replyCount ? message.threadInfo.replyCount > 0 : undefined}
       onCancel={onCancel}
       onSubmit={() => {
         if (message.isUserMessage() || message.isFileMessage() || message.isMultipleFilesMessage()) {
diff --git a/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx b/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx
index 678a73740..8ae91cf7d 100644
--- a/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx
+++ b/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx
@@ -50,14 +50,14 @@ export const SuggestedMentionListView = (props: SuggestedMentionListViewProps) =
   const currentUserId = stores?.sdkStore?.sdk?.currentUser?.userId || '';
   const scrollRef = useRef(null);
   const { stringSet } = useLocalization();
-  const [timer, setTimer] = useState(null);
-  const [searchString, setSearchString] = useState('');
+  const [timer, setTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
+  const [searchString, setSearchString] = useState<string>('');
   const [lastSearchString, setLastSearchString] = useState('');
-  const [currentFocusedMember, setCurrentFocusedMember] = useState<User>(null);
+  const [currentFocusedMember, setCurrentFocusedMember] = useState<User | null>(null);
   const [currentMemberList, setCurrentMemberList] = useState<Member[]>([]);
 
   useEffect(() => {
-    clearTimeout(timer);
+    clearTimeout(timer ?? undefined);
     setTimer(
       setTimeout(() => {
         setSearchString(targetNickname);
@@ -67,22 +67,22 @@ export const SuggestedMentionListView = (props: SuggestedMentionListViewProps) =
 
   useEffect(() => {
     if (inputEvent?.key === MessageInputKeys.Enter) {
-      if (currentMemberList.length > 0) {
-        onUserItemClick(currentFocusedMember);
+      if (currentFocusedMember && currentMemberList.length > 0) {
+        onUserItemClick?.(currentFocusedMember);
       }
     }
     if (inputEvent?.key === MessageInputKeys.ArrowUp) {
       const currentUserIndex = currentMemberList.findIndex((member) => member?.userId === currentFocusedMember?.userId);
       if (0 < currentUserIndex) {
         setCurrentFocusedMember(currentMemberList[currentUserIndex - 1]);
-        onFocusItemChange(currentMemberList[currentUserIndex - 1]);
+        onFocusItemChange?.(currentMemberList[currentUserIndex - 1]);
       }
     }
     if (inputEvent?.key === MessageInputKeys.ArrowDown) {
       const currentUserIndex = currentMemberList.findIndex((member) => member?.userId === currentFocusedMember?.userId);
       if (currentUserIndex < currentMemberList.length - 1) {
         setCurrentFocusedMember(currentMemberList[currentUserIndex + 1]);
-        onFocusItemChange(currentMemberList[currentUserIndex + 1]);
+        onFocusItemChange?.(currentMemberList[currentUserIndex + 1]);
       }
     }
   }, [inputEvent]);
@@ -108,7 +108,7 @@ export const SuggestedMentionListView = (props: SuggestedMentionListViewProps) =
           setCurrentFocusedMember(suggestingMembers[0]);
         }
         setLastSearchString(searchString);
-        onFetchUsers(suggestingMembers);
+        onFetchUsers?.(suggestingMembers);
         setCurrentMemberList(suggestingMembers);
       })
       .catch((error) => {
@@ -142,7 +142,7 @@ export const SuggestedMentionListView = (props: SuggestedMentionListViewProps) =
             isFocused={member?.userId === currentFocusedMember?.userId}
             parentScrollRef={scrollRef}
             onClick={({ member }) => {
-              onUserItemClick(member);
+              onUserItemClick?.(member);
             }}
             onMouseOver={({ member }) => {
               setCurrentFocusedMember(member);
diff --git a/src/modules/GroupChannel/context/GroupChannelProvider.tsx b/src/modules/GroupChannel/context/GroupChannelProvider.tsx
index a6e694dc3..b200c239d 100644
--- a/src/modules/GroupChannel/context/GroupChannelProvider.tsx
+++ b/src/modules/GroupChannel/context/GroupChannelProvider.tsx
@@ -85,15 +85,15 @@ export interface GroupChannelContextType extends ContextBaseType, MessageListDat
   fetchChannelError: SendbirdError | null;
   nicknamesMap: Map<string, string>;
 
-  scrollRef: React.MutableRefObject<HTMLDivElement>;
+  scrollRef: React.RefObject<HTMLDivElement>;
   scrollDistanceFromBottomRef: React.MutableRefObject<number>;
   scrollPubSub: PubSubTypes<ScrollTopics, ScrollTopicUnion>;
-  messageInputRef: React.MutableRefObject<HTMLDivElement>;
+  messageInputRef: React.RefObject<HTMLDivElement>;
 
   quoteMessage: SendableMessageType | null;
   setQuoteMessage: React.Dispatch<React.SetStateAction<SendableMessageType | null>>;
-  animatedMessageId: number;
-  setAnimatedMessageId: React.Dispatch<React.SetStateAction<number>>;
+  animatedMessageId: number | null;
+  setAnimatedMessageId: React.Dispatch<React.SetStateAction<number | null>>;
   isScrollBottomReached: boolean;
   setIsScrollBottomReached: React.Dispatch<React.SetStateAction<boolean>>;
 
@@ -108,7 +108,7 @@ export interface GroupChannelProviderProps
   children?: React.ReactNode;
 }
 
-export const GroupChannelContext = React.createContext<GroupChannelContextType>(null);
+export const GroupChannelContext = React.createContext<GroupChannelContextType | null>(null);
 export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   const {
     channelUrl,
@@ -146,10 +146,10 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   const { markAsReadScheduler, logger } = config;
 
   // State
-  const [quoteMessage, setQuoteMessage] = useState<SendableMessageType>(null);
+  const [quoteMessage, setQuoteMessage] = useState<SendableMessageType | null>(null);
   const [animatedMessageId, setAnimatedMessageId] = useState<number | null>(null);
   const [currentChannel, setCurrentChannel] = useState<GroupChannel | null>(null);
-  const [fetchChannelError, setFetchChannelError] = useState<SendbirdError>(null);
+  const [fetchChannelError, setFetchChannelError] = useState<SendbirdError | null>(null);
 
   // Ref
   const { scrollRef, scrollPubSub, scrollDistanceFromBottomRef, isScrollBottomReached, setIsScrollBottomReached } = useMessageListScroll(scrollBehavior);
@@ -175,10 +175,10 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   );
 
   const preventDuplicateRequest = usePreventDuplicateRequest();
-  const messageDataSource = useGroupChannelMessages(sdkStore.sdk, currentChannel, {
+  const messageDataSource = useGroupChannelMessages(sdkStore.sdk, currentChannel!, {
     startingPoint,
     replyType: chatReplyType,
-    collectionCreator: getCollectionCreator(currentChannel, messageListQueryParams),
+    collectionCreator: getCollectionCreator(currentChannel!, messageListQueryParams),
     shouldCountNewMessages: () => !isScrollBottomReached,
     markAsRead: (channels) => {
       // isScrollBottomReached is a state that is updated after the render is completed.
@@ -201,7 +201,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
       setFetchChannelError(null);
     },
     onChannelUpdated: (channel) => setCurrentChannel(channel),
-    logger,
+    logger: logger as any,
   });
 
   useOnScrollPositionChangeDetectorWithRef(scrollRef, {
@@ -211,17 +211,18 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
       await preventDuplicateRequest.run(async () => {
         if (!messageDataSource.hasPrevious()) return;
 
-        const prevViewInfo = { scrollTop: scrollRef.current.scrollTop, scrollHeight: scrollRef.current.scrollHeight };
+        const prevViewInfo = { scrollTop: scrollRef.current?.scrollTop, scrollHeight: scrollRef.current?.scrollHeight };
         await messageDataSource.loadPrevious();
 
         // FIXME: We need a good way to detect right after the rendering of the screen instead of using setTimeout.
         setTimeout(() => {
-          const nextViewInfo = { scrollHeight: scrollRef.current.scrollHeight };
-          const viewUpdated = prevViewInfo.scrollHeight < nextViewInfo.scrollHeight;
-
-          if (viewUpdated) {
-            const bottomOffset = prevViewInfo.scrollHeight - prevViewInfo.scrollTop;
-            scrollPubSub.publish('scroll', { top: nextViewInfo.scrollHeight - bottomOffset, lazy: false, animated: false });
+          const nextViewInfo = { scrollHeight: scrollRef.current?.scrollHeight };
+          if (prevViewInfo.scrollHeight && nextViewInfo.scrollHeight) {
+            const viewUpdated = prevViewInfo.scrollHeight < nextViewInfo.scrollHeight;
+            if (viewUpdated) {
+              const bottomOffset = prevViewInfo.scrollHeight - (prevViewInfo.scrollTop ?? 0);
+              scrollPubSub.publish('scroll', { top: nextViewInfo.scrollHeight - bottomOffset, lazy: false, animated: false });
+            }
           }
         });
       });
@@ -234,15 +235,16 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
       await preventDuplicateRequest.run(async () => {
         if (!messageDataSource.hasNext()) return;
 
-        const prevViewInfo = { scrollTop: scrollRef.current.scrollTop, scrollHeight: scrollRef.current.scrollHeight };
+        const prevViewInfo = { scrollTop: scrollRef.current?.scrollTop, scrollHeight: scrollRef.current?.scrollHeight };
         await messageDataSource.loadNext();
 
         setTimeout(() => {
-          const nextViewInfo = { scrollHeight: scrollRef.current.scrollHeight };
-          const viewUpdated = prevViewInfo.scrollHeight < nextViewInfo.scrollHeight;
-
-          if (viewUpdated) {
-            scrollPubSub.publish('scroll', { top: prevViewInfo.scrollTop, lazy: false, animated: false });
+          const nextViewInfo = { scrollHeight: scrollRef.current?.scrollHeight };
+          if (prevViewInfo.scrollHeight && nextViewInfo.scrollHeight) {
+            const viewUpdated = prevViewInfo.scrollHeight < nextViewInfo.scrollHeight;
+            if (viewUpdated) {
+              scrollPubSub.publish('scroll', { top: prevViewInfo.scrollTop, lazy: false, animated: false });
+            }
           }
         });
       });
@@ -265,7 +267,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
         setFetchChannelError(null);
       } catch (error) {
         setCurrentChannel(null);
-        setFetchChannelError(error);
+        setFetchChannelError(error as SendbirdError);
         logger?.error?.('GroupChannelProvider: error when fetching channel', error);
       } finally {
         // Reset states when channel changes
@@ -455,7 +457,7 @@ export const useGroupChannelContext = () => {
 };
 
 function getCollectionCreator(groupChannel: GroupChannel, messageListQueryParams?: MessageListQueryParamsType) {
-  return (defaultParams: MessageListQueryParamsType) => {
+  return (defaultParams?: MessageListQueryParamsType) => {
     const params = { ...defaultParams, prevResultLimit: 30, nextResultLimit: 30, ...messageListQueryParams };
     return groupChannel.createMessageCollection({
       ...params,
diff --git a/src/modules/GroupChannel/context/hooks/useMessageActions.ts b/src/modules/GroupChannel/context/hooks/useMessageActions.ts
index 1d79ce37d..53dad837d 100644
--- a/src/modules/GroupChannel/context/hooks/useMessageActions.ts
+++ b/src/modules/GroupChannel/context/hooks/useMessageActions.ts
@@ -34,7 +34,7 @@ type MessageActions = {
 
 interface Params extends GroupChannelProviderProps, MessageListDataSource {
   scrollToBottom(animated?: boolean): Promise<void>;
-  quoteMessage?: SendableMessageType;
+  quoteMessage?: SendableMessageType | null;
   replyType: ReplyType;
 }
 
@@ -67,7 +67,7 @@ export function useMessageActions(params: Params): MessageActions {
 
       if (params.quoteMessage && replyType !== 'NONE') {
         messageParams.isReplyToChannel = true;
-        messageParams.parentMessageId = quoteMessage.messageId;
+        messageParams.parentMessageId = quoteMessage?.messageId;
       }
 
       return messageParams;
diff --git a/src/modules/GroupChannel/context/hooks/useMessageListScroll.ts b/src/modules/GroupChannel/context/hooks/useMessageListScroll.ts
index db7ee3695..ea9320e56 100644
--- a/src/modules/GroupChannel/context/hooks/useMessageListScroll.ts
+++ b/src/modules/GroupChannel/context/hooks/useMessageListScroll.ts
@@ -84,7 +84,7 @@ export function useMessageListScroll(behavior: 'smooth' | 'auto') {
 
           if (scrollRef.current.scroll) {
             scrollRef.current.scroll({ top, behavior: getScrollBehavior(behavior, animated) });
-          } else {
+          } else if (typeof top === 'number') {
             scrollRef.current.scrollTop = top;
           }
 
diff --git a/src/modules/GroupChannel/context/hooks/useToggleReactionCallback.ts b/src/modules/GroupChannel/context/hooks/useToggleReactionCallback.ts
index 8eaa7216e..e9cb60d55 100644
--- a/src/modules/GroupChannel/context/hooks/useToggleReactionCallback.ts
+++ b/src/modules/GroupChannel/context/hooks/useToggleReactionCallback.ts
@@ -12,26 +12,26 @@ export default function useToggleReactionCallback(
   return useCallback(
     (message: BaseMessage, key: string, isReacted: boolean) => {
       if (!currentChannel) {
-        logger.warning(`${LOG_PRESET} currentChannel doesn't exist`, currentChannel);
+        logger?.warning(`${LOG_PRESET} currentChannel doesn't exist`, currentChannel);
         return;
       }
       if (isReacted) {
         currentChannel
           .deleteReaction(message, key)
           .then((res) => {
-            logger.info(`${LOG_PRESET} Delete reaction success`, res);
+            logger?.info(`${LOG_PRESET} Delete reaction success`, res);
           })
           .catch((err) => {
-            logger.warning(`${LOG_PRESET} Delete reaction failed`, err);
+            logger?.warning(`${LOG_PRESET} Delete reaction failed`, err);
           });
       } else {
         currentChannel
           .addReaction(message, key)
           .then((res) => {
-            logger.info(`${LOG_PRESET} Add reaction success`, res);
+            logger?.info(`${LOG_PRESET} Add reaction success`, res);
           })
           .catch((err) => {
-            logger.warning(`${LOG_PRESET} Add reaction failed`, err);
+            logger?.warning(`${LOG_PRESET} Add reaction failed`, err);
           });
       }
     },
diff --git a/src/modules/GroupChannel/context/utils.ts b/src/modules/GroupChannel/context/utils.ts
index 8a1bd5e5b..6b4aa33bd 100644
--- a/src/modules/GroupChannel/context/utils.ts
+++ b/src/modules/GroupChannel/context/utils.ts
@@ -26,12 +26,12 @@ export function getMessageTopOffset(messageCreatedAt: number): number | null {
   return null;
 }
 
-export const isDisabledBecauseFrozen = (groupChannel?: GroupChannel) => {
+export const isDisabledBecauseFrozen = (groupChannel?: GroupChannel | null) => {
   if (!groupChannel) return false;
   return groupChannel.isFrozen && groupChannel.myRole !== 'operator';
 };
 
-export const isDisabledBecauseMuted = (groupChannel?: GroupChannel) => {
+export const isDisabledBecauseMuted = (groupChannel?: GroupChannel | null) => {
   if (!groupChannel) return false;
   return groupChannel.myMutedState === 'muted';
 };
diff --git a/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx b/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx
index e68c341ab..4777ae7ce 100644
--- a/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx
+++ b/src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx
@@ -126,7 +126,7 @@ const ChannelListComponent = <T, >(props: {
   const { data, renderItem, onLoadMore, placeholderLoading, placeholderError, placeholderEmpty } = props;
 
   const onScroll = useOnScrollPositionChangeDetector({
-    onReachedBottom: () => onLoadMore(),
+    onReachedBottom: () => onLoadMore?.(),
   });
 
   return (
diff --git a/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx b/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
index 8c3baca0c..9c5efdac4 100644
--- a/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
+++ b/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
@@ -9,6 +9,7 @@ import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { GroupChannelListItem } from '../GroupChannelListItem';
 import AddGroupChannel from '../AddGroupChannel';
 import { GroupChannelListItemBasicProps } from '../GroupChannelListItem/GroupChannelListItemView';
+import { noop } from '../../../../utils/utils';
 
 interface GroupChannelItemProps extends GroupChannelListItemBasicProps {}
 
@@ -81,9 +82,9 @@ export const GroupChannelListUI = (props: GroupChannelListUIProps) => {
       renderPlaceHolderError={renderPlaceHolderError}
       renderPlaceHolderLoading={renderPlaceHolderLoading}
       renderPlaceHolderEmptyList={renderPlaceHolderEmptyList}
-      onChangeTheme={onThemeChange}
+      onChangeTheme={onThemeChange ?? noop}
       allowProfileEdit={allowProfileEdit}
-      onUserProfileUpdated={onUserProfileUpdated}
+      onUserProfileUpdated={onUserProfileUpdated ?? noop}
       channels={groupChannels}
       onLoadMore={loadMore}
       initialized={initialized}
diff --git a/src/modules/GroupChannelList/components/LeaveGroupChannel/index.tsx b/src/modules/GroupChannelList/components/LeaveGroupChannel/index.tsx
index 6cd407889..cfe537393 100644
--- a/src/modules/GroupChannelList/components/LeaveGroupChannel/index.tsx
+++ b/src/modules/GroupChannelList/components/LeaveGroupChannel/index.tsx
@@ -30,7 +30,7 @@ export const LeaveGroupChannel = ({
               'LeaveGroupChannel: Leaving channel successful!',
               channel,
             );
-            onSubmit();
+            onSubmit?.();
           });
         }}
         submitText={stringSet.MODAL__LEAVE_CHANNEL__FOOTER}
diff --git a/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx b/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx
index eed808311..c0ab8a763 100644
--- a/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx
+++ b/src/modules/GroupChannelList/context/GroupChannelListProvider.tsx
@@ -52,7 +52,7 @@ export interface GroupChannelListProviderProps
   children?: React.ReactNode;
 }
 
-export const GroupChannelListContext = React.createContext<GroupChannelListContextType>(null);
+export const GroupChannelListContext = React.createContext<GroupChannelListContextType | null>(null);
 export const GroupChannelListProvider = (props: GroupChannelListProviderProps) => {
   const {
     children,
diff --git a/src/modules/MessageSearch/components/MessageSearchUI/index.tsx b/src/modules/MessageSearch/components/MessageSearchUI/index.tsx
index ae9af5399..473e4cdcc 100644
--- a/src/modules/MessageSearch/components/MessageSearchUI/index.tsx
+++ b/src/modules/MessageSearch/components/MessageSearchUI/index.tsx
@@ -137,7 +137,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
                     key={message.messageId}
                     selected={(selectedMessageId === message.messageId)}
                     onClick={() => {
-                      onResultClick(message);
+                      onResultClick?.(message);
                       setSelectedMessageId(message.messageId);
                     }}
                   />
@@ -150,7 +150,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
                   key={message.messageId}
                   selected={(selectedMessageId === message.messageId)}
                   onClick={() => {
-                    onResultClick(message);
+                    onResultClick?.(message);
                     setSelectedMessageId(message.messageId);
                   }}
                 />
diff --git a/src/modules/MessageSearch/context/MessageSearchProvider.tsx b/src/modules/MessageSearch/context/MessageSearchProvider.tsx
index 926df677f..37a14ff27 100644
--- a/src/modules/MessageSearch/context/MessageSearchProvider.tsx
+++ b/src/modules/MessageSearch/context/MessageSearchProvider.tsx
@@ -20,13 +20,14 @@ import useScrollCallback, {
   CallbackReturn as UseScrollCallbackType,
 } from './hooks/useScrollCallback';
 import useSearchStringEffect from './hooks/useSearchStringEffect';
+import { CoreMessageType } from '../../../utils';
 
 export interface MessageSearchProviderProps {
   channelUrl: string;
   children?: React.ReactElement;
   searchString?: string;
   messageSearchQuery?: MessageSearchQueryParams;
-  onResultLoaded?(messages?: Array<ClientSentMessages>, error?: SendbirdError): void;
+  onResultLoaded?(messages?: Array<CoreMessageType> | null, error?: SendbirdError | null): void;
   onResultClick?(message: ClientSentMessages): void;
 }
 
@@ -37,7 +38,7 @@ interface MessageSearchProviderInterface extends MessageSearchProviderProps {
   selectedMessageId: number;
   setSelectedMessageId: React.Dispatch<React.SetStateAction<number>>;
   messageSearchDispatcher: (props: { type: string, payload: any }) => void;
-  scrollRef: React.MutableRefObject<HTMLDivElement>;
+  scrollRef: React.RefObject<HTMLDivElement>;
   allMessages: MessageSearchReducerState['allMessages'];
   loading: boolean;
   isInvalid: boolean;
@@ -49,7 +50,7 @@ interface MessageSearchProviderInterface extends MessageSearchProviderProps {
   handleOnScroll: (e: React.BaseSyntheticEvent) => void;
 }
 
-const MessageSearchContext = React.createContext<MessageSearchProviderInterface | null>(undefined);
+const MessageSearchContext = React.createContext<MessageSearchProviderInterface | null>(null);
 
 const MessageSearchProvider: React.FC<MessageSearchProviderProps> = (props: MessageSearchProviderProps) => {
   const {
@@ -79,7 +80,7 @@ const MessageSearchProvider: React.FC<MessageSearchProviderProps> = (props: Mess
   const logger = globalState?.config?.logger;
   const sdk = globalState?.stores?.sdkStore?.sdk;
   const sdkInit = globalState?.stores?.sdkStore?.initialized;
-  const scrollRef = useRef(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
   const handleOnScroll = (e: React.BaseSyntheticEvent) => {
     const scrollElement = e.target as HTMLDivElement;
     const {
@@ -103,7 +104,7 @@ const MessageSearchProvider: React.FC<MessageSearchProviderProps> = (props: Mess
     { sdk, logger, messageSearchDispatcher },
   );
 
-  const requestString = useSearchStringEffect({ searchString }, { messageSearchDispatcher });
+  const requestString = useSearchStringEffect({ searchString: searchString ?? '' }, { messageSearchDispatcher });
 
   useGetSearchMessages(
     { currentChannel, channelUrl, requestString, messageSearchQuery, onResultLoaded, retryCount },
@@ -147,8 +148,11 @@ const MessageSearchProvider: React.FC<MessageSearchProviderProps> = (props: Mess
   );
 };
 
-export type UseMessageSearchType = () => MessageSearchProviderInterface;
-const useMessageSearchContext: UseMessageSearchType = () => React.useContext(MessageSearchContext);
+const useMessageSearchContext = () => {
+  const context = React.useContext(MessageSearchContext);
+  if (!context) throw new Error('MessageSearchContext not found. Use within the MessageSearch module.');
+  return context;
+};
 
 export {
   MessageSearchProvider,
diff --git a/src/modules/MessageSearch/context/hooks/useGetSearchedMessages.ts b/src/modules/MessageSearch/context/hooks/useGetSearchedMessages.ts
index 543c77a40..0378e7a17 100644
--- a/src/modules/MessageSearch/context/hooks/useGetSearchedMessages.ts
+++ b/src/modules/MessageSearch/context/hooks/useGetSearchedMessages.ts
@@ -16,7 +16,7 @@ enum MessageSearchOrder {
 }
 
 interface MainProps {
-  currentChannel: GroupChannel;
+  currentChannel: GroupChannel | null;
   channelUrl: string;
   requestString?: string;
   messageSearchQuery?: MessageSearchQueryParams;
@@ -63,7 +63,7 @@ function useGetSearchedMessages(
                 },
               });
               if (onResultLoaded && typeof onResultLoaded === 'function') {
-                onResultLoaded(messages as CoreMessageType[], null);
+                onResultLoaded(messages as CoreMessageType[], undefined);
               }
             }).catch((error) => {
               logger.warning('MessageSearch | useGetSearchedMessages: failed getting search messages.', error);
@@ -72,7 +72,7 @@ function useGetSearchedMessages(
                 payload: null,
               });
               if (onResultLoaded && typeof onResultLoaded === 'function') {
-                onResultLoaded(null, error);
+                onResultLoaded(undefined, error);
               }
             });
             messageSearchDispatcher({
@@ -87,7 +87,7 @@ function useGetSearchedMessages(
               payload: null,
             });
             if (onResultLoaded && typeof onResultLoaded === 'function') {
-              onResultLoaded(null, error);
+              onResultLoaded(undefined, error);
             }
           });
       } else {
diff --git a/src/modules/MessageSearch/context/hooks/useScrollCallback.ts b/src/modules/MessageSearch/context/hooks/useScrollCallback.ts
index 142484f1e..d7adeb416 100644
--- a/src/modules/MessageSearch/context/hooks/useScrollCallback.ts
+++ b/src/modules/MessageSearch/context/hooks/useScrollCallback.ts
@@ -1,33 +1,24 @@
 import type { SendbirdError } from '@sendbird/chat';
-import type { MessageSearchQuery } from '@sendbird/chat/message';
+import type { BaseMessage, MessageSearchQuery } from '@sendbird/chat/message';
 import { useCallback } from 'react';
 import * as messageActionTypes from '../dux/actionTypes';
 import { CoreMessageType } from '../../../../utils';
 import { LoggerInterface } from '../../../../lib/Logger';
 
 interface MainProps {
-  currentMessageSearchQuery: MessageSearchQuery;
+  currentMessageSearchQuery: MessageSearchQuery | null;
   hasMoreResult: boolean;
-  onResultLoaded?: (
-    messages?: Array<CoreMessageType>,
-    error?: SendbirdError,
-  ) => void;
+  onResultLoaded?: (messages?: Array<CoreMessageType> | null, error?: SendbirdError | null) => void;
 }
 
-type MessageSearchDispatcherType = { type: string, payload: any };
+type MessageSearchDispatcherType = { type: string; payload: any };
 
 interface ToolProps {
   logger: LoggerInterface;
   messageSearchDispatcher: (payload: MessageSearchDispatcherType) => void;
 }
 
-export type CallbackReturn = (
-  callback: (
-    messages: Array<CoreMessageType>,
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-    error: any,
-  ) => void
-) => void;
+export type CallbackReturn = (callback: (...args: [messages: BaseMessage[], error: null] | [messages: null, error: any]) => void) => void;
 
 function useScrollCallback(
   { currentMessageSearchQuery, hasMoreResult, onResultLoaded }: MainProps,
@@ -38,27 +29,32 @@ function useScrollCallback(
       logger.warning('MessageSearch | useScrollCallback: no more searched results', hasMoreResult);
     }
     if (currentMessageSearchQuery && currentMessageSearchQuery.hasNext) {
-      currentMessageSearchQuery.next().then((messages) => {
-        logger.info('MessageSearch | useScrollCallback: succeeded getting searched messages', messages);
-        messageSearchDispatcher({
-          type: messageActionTypes.GET_NEXT_SEARCHED_MESSAGES,
-          payload: messages,
+      currentMessageSearchQuery
+        .next()
+        .then((messages) => {
+          logger.info('MessageSearch | useScrollCallback: succeeded getting searched messages', messages);
+          messageSearchDispatcher({
+            type: messageActionTypes.GET_NEXT_SEARCHED_MESSAGES,
+            payload: messages,
+          });
+          cb(messages, null);
+          if (onResultLoaded && typeof onResultLoaded === 'function') {
+            onResultLoaded(messages as CoreMessageType[], null);
+          }
+        })
+        .catch((error) => {
+          logger.warning('MessageSearch | useScrollCallback: failed getting searched messages', error);
+          cb(null, error);
+          if (onResultLoaded && typeof onResultLoaded === 'function') {
+            onResultLoaded(null, error);
+          }
         });
-        cb(messages as CoreMessageType[], null);
-        if (onResultLoaded && typeof onResultLoaded === 'function') {
-          onResultLoaded(messages as CoreMessageType[], null);
-        }
-      }).catch((error) => {
-        logger.warning('MessageSearch | useScrollCallback: failed getting searched messages', error);
-        cb(null, error);
-        if (onResultLoaded && typeof onResultLoaded === 'function') {
-          onResultLoaded(null, error);
-        }
-      });
     } else {
       logger.warning('MessageSearch | useScrollCallback: no currentMessageSearchQuery');
     }
-  }, [currentMessageSearchQuery, hasMoreResult]);
+  },
+  [currentMessageSearchQuery, hasMoreResult],
+  );
 }
 
 export default useScrollCallback;
diff --git a/src/modules/MessageSearch/context/hooks/useSearchStringEffect.ts b/src/modules/MessageSearch/context/hooks/useSearchStringEffect.ts
index 9235ca3d4..7995546bc 100644
--- a/src/modules/MessageSearch/context/hooks/useSearchStringEffect.ts
+++ b/src/modules/MessageSearch/context/hooks/useSearchStringEffect.ts
@@ -15,10 +15,10 @@ function useSearchStringEffect(
   { searchString }: DynamicParams,
   { messageSearchDispatcher }: StaticParams,
 ): string {
-  const [requestString, setRequestString] = useState('');
-  const [debouncingTimer, setDebouncingTimer] = useState(null);
+  const [requestString, setRequestString] = useState<string>('');
+  const [debouncingTimer, setDebouncingTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
-    clearTimeout(debouncingTimer);
+    clearTimeout(debouncingTimer ?? undefined);
     if (searchString) {
       setDebouncingTimer(
         setTimeout(() => {
diff --git a/src/modules/MessageSearch/index.tsx b/src/modules/MessageSearch/index.tsx
index b755d71a9..53236c6a6 100644
--- a/src/modules/MessageSearch/index.tsx
+++ b/src/modules/MessageSearch/index.tsx
@@ -1,16 +1,14 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, ChangeEventHandler } from 'react';
 import './index.scss';
 
 import MessageSearch, { MessageSearchUIProps } from './components/MessageSearchUI';
 import { LocalizationContext } from '../../lib/LocalizationContext';
-import Icon, { IconTypes, IconColors } from '../../ui/Icon';
+import Icon, { IconTypes, IconColors, IconProps } from '../../ui/Icon';
 import Loader from '../../ui/Loader';
 import { MessageSearchProvider, MessageSearchProviderProps } from './context/MessageSearchProvider';
 import Header from '../../ui/Header';
 
-export interface MessageSearchPannelProps extends
-  MessageSearchUIProps, MessageSearchProviderProps {
-  onResultClick?: (message) => void;
+export interface MessageSearchPannelProps extends MessageSearchUIProps, MessageSearchProviderProps {
   onCloseClick?: () => void;
 }
 
@@ -46,7 +44,7 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
     }, 500);
   }, [inputString]);
 
-  const handleOnChangeInputString = (e) => {
+  const handleOnChangeInputString: ChangeEventHandler<HTMLInputElement> = (e) => {
     setInputString(e.target.value);
   };
 
@@ -54,7 +52,7 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
     setLoading(false);
   };
 
-  const handleOnClickResetStringButton = (e) => {
+  const handleOnClickResetStringButton: IconProps['onClick'] = (e) => {
     e.stopPropagation();
     setInputString('');
     setSearchString('');
diff --git a/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx b/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx
index ef9986abd..d0a7b0157 100644
--- a/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx
+++ b/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx
@@ -50,7 +50,7 @@ export default function OpenChannelMessage(
   const currentUserId = globalState?.config?.userId;
   const isOgMessageEnabledInOpenChannel = globalState.config.openChannel.enableOgtag;
 
-  let sender: User = null;
+  let sender: User | undefined;
   if (message?.messageType !== 'admin') {
     sender = (message as SendableMessageType)?.sender;
   }
diff --git a/src/modules/OpenChannel/components/OpenChannelMessageList/index.tsx b/src/modules/OpenChannel/components/OpenChannelMessageList/index.tsx
index 911a708fc..ef60cc5da 100644
--- a/src/modules/OpenChannel/components/OpenChannelMessageList/index.tsx
+++ b/src/modules/OpenChannel/components/OpenChannelMessageList/index.tsx
@@ -23,7 +23,7 @@ export type OpenChannelMessageListProps = {
 /** @deprecated * */
 export type OpenchannelMessageListProps = OpenChannelMessageListProps;
 
-function OpenChannelMessageList(props: OpenChannelMessageListProps, ref: React.RefObject<HTMLDivElement>): ReactElement {
+function OpenChannelMessageList(props: OpenChannelMessageListProps, ref: React.ForwardedRef<HTMLDivElement>): ReactElement {
   const {
     isMessageGroupingEnabled = true,
     allMessages,
@@ -32,11 +32,12 @@ function OpenChannelMessageList(props: OpenChannelMessageListProps, ref: React.R
   } = useOpenChannelContext();
   const store = useSendbirdStateContext();
   const userId = store.config.userId;
-  const scrollRef = ref || useRef(null);
+  const localRef = useRef<HTMLDivElement>(null);
+  const scrollRef = ref || localRef;
   const [showScrollDownButton, setShowScrollDownButton] = useState(false);
 
   const scrollToBottom = () => {
-    if (scrollRef && scrollRef.current) {
+    if (scrollRef && 'current' in scrollRef && scrollRef.current) {
       scrollRef.current.scrollTo(0, scrollRef.current.scrollHeight);
       setShowScrollDownButton(false);
     }
@@ -46,7 +47,7 @@ function OpenChannelMessageList(props: OpenChannelMessageListProps, ref: React.R
     setShowScrollDownButton,
     hasMore,
     onScroll,
-    scrollRef,
+    scrollRef: scrollRef as any,
   });
 
   const memoizedMessageList = useMemo(() => {
diff --git a/src/modules/OpenChannel/context/OpenChannelProvider.tsx b/src/modules/OpenChannel/context/OpenChannelProvider.tsx
index 157459d82..7bdcddb28 100644
--- a/src/modules/OpenChannel/context/OpenChannelProvider.tsx
+++ b/src/modules/OpenChannel/context/OpenChannelProvider.tsx
@@ -84,7 +84,7 @@ interface OpenChannelInterface extends OpenChannelProviderProps, MessageStoreSta
   resendMessage: any;
 }
 
-const OpenChannelContext = React.createContext<OpenChannelInterface | null>(undefined);
+const OpenChannelContext = React.createContext<OpenChannelInterface | null>(null);
 
 const OpenChannelProvider: React.FC<OpenChannelProviderProps> = (props: OpenChannelProviderProps) => {
   const {
@@ -132,7 +132,7 @@ const OpenChannelProvider: React.FC<OpenChannelProviderProps> = (props: OpenChan
   } = messagesStore;
   // ref
   const messageInputRef = useRef(null); // useSendMessageCallback
-  const conversationScrollRef = useRef(null); // useScrollAfterSendMessageCallback
+  const conversationScrollRef = useRef<HTMLDivElement>(null); // useScrollAfterSendMessageCallback
 
   // const
   const userFilledMessageListParams = queries?.messageListParams;
@@ -172,7 +172,7 @@ const OpenChannelProvider: React.FC<OpenChannelProviderProps> = (props: OpenChan
   );
 
   const fetchMore: boolean = utils.shouldFetchMore(allMessages?.length, messageLimit);
-  // donot fetch more for streaming
+  // do not fetch more for streaming
   const onScroll = useScrollCallback(
     { currentOpenChannel, lastMessageTimestamp, fetchMore },
     { sdk, logger, messagesDispatcher, hasMore, userFilledMessageListParams },
@@ -324,8 +324,11 @@ const OpenChannelProvider: React.FC<OpenChannelProviderProps> = (props: OpenChan
   );
 };
 
-export type UseOpenChannelType = () => OpenChannelInterface;
-const useOpenChannelContext: UseOpenChannelType = () => React.useContext(OpenChannelContext);
+const useOpenChannelContext = () => {
+  const context = React.useContext(OpenChannelContext);
+  if (!context) throw new Error('OpenChannelContext not found. Use within the OpenChannel module');
+  return context;
+};
 
 export {
   OpenChannelProvider,
diff --git a/src/modules/OpenChannel/context/dux/reducers.ts b/src/modules/OpenChannel/context/dux/reducers.ts
index 7aeeb1732..705c5a4f0 100644
--- a/src/modules/OpenChannel/context/dux/reducers.ts
+++ b/src/modules/OpenChannel/context/dux/reducers.ts
@@ -2,7 +2,8 @@ import { State as initialStateInterface } from './initialState';
 import * as actionTypes from './actionTypes';
 
 import compareIds from '../../../../utils/compareIds';
-import { SendableMessageType } from '../../../../utils';
+import { CoreMessageType, SendableMessageType } from '../../../../utils';
+import { User } from '@sendbird/chat';
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 // @ts-ignore: Unreachable code error
@@ -74,12 +75,12 @@ export default function reducer(
         lastMessageTimestamp,
       } = action.payload;
       const actionChannelUrl = currentOpenChannel.url;
-      const receivedMessages = isFailed ? [] : messages;
+      const receivedMessages = (isFailed ? [] : messages) as CoreMessageType[];
       const _hasMore = isFailed ? false : hasMore;
       const _lastMessageTimestamp = isFailed ? 0 : lastMessageTimestamp;
 
       const stateChannel = state.currentOpenChannel;
-      const stateChannelUrl = stateChannel.url;
+      const stateChannelUrl = stateChannel?.url;
 
       if (actionChannelUrl !== stateChannelUrl) {
         return state;
@@ -105,7 +106,7 @@ export default function reducer(
         message,
         channel,
       } = action.payload;
-      if (channel?.url !== state.currentOpenChannel.url
+      if (channel?.url !== state.currentOpenChannel?.url
         || state.allMessages.some((m) => (m as SendableMessageType).reqId === message.reqId)
         // Handing failed first than sending start issue
       ) {
@@ -168,7 +169,7 @@ export default function reducer(
     case actionTypes.RESENDING_MESSAGE_START: {
       const eventedChannel = action.payload.channel;
       const resentMessage = action.payload.message;
-      if (eventedChannel.url !== state.currentOpenChannel.url) {
+      if (eventedChannel.url !== state.currentOpenChannel?.url) {
         return state;
       }
       return {
@@ -181,7 +182,7 @@ export default function reducer(
     case actionTypes.FETCH_PARTICIPANT_LIST: {
       const eventedChannel = action.payload.channel;
       const fetchedParticipantList = action.payload.users;
-      if (eventedChannel.url !== state.currentOpenChannel.url) {
+      if (eventedChannel.url !== state.currentOpenChannel?.url) {
         return state;
       }
       return {
@@ -192,9 +193,9 @@ export default function reducer(
     }
     case actionTypes.FETCH_BANNED_USER_LIST: {
       const eventedChannel = action.payload.channel;
-      const fetchedBannedUserList = action.payload.users;
+      const fetchedBannedUserList = action.payload.users as User[];
       if (
-        (eventedChannel.url !== state.currentOpenChannel.url)
+        (eventedChannel.url !== state.currentOpenChannel?.url)
         || !(fetchedBannedUserList.every(user => typeof user.userId === 'string'))
       ) {
         return state;
@@ -210,9 +211,9 @@ export default function reducer(
     }
     case actionTypes.FETCH_MUTED_USER_LIST: {
       const eventedChannel = action.payload.channel;
-      const fetchedMutedUserList = action.payload.users;
+      const fetchedMutedUserList = action.payload.users as User[];
       if (
-        (eventedChannel.url !== state.currentOpenChannel.url)
+        (eventedChannel.url !== state.currentOpenChannel?.url)
         || !(fetchedMutedUserList.every(user => typeof user.userId === 'string'))
       ) {
         return state;
@@ -236,7 +237,7 @@ export default function reducer(
       } = state;
 
       if (
-        !compareIds(eventedChannel.url, currentOpenChannel.url)
+        !compareIds(eventedChannel.url, currentOpenChannel?.url)
         || (
           !(state.allMessages.map(
             (message) => message.messageId).indexOf(receivedMessage.messageId) < 0
diff --git a/src/modules/OpenChannel/context/hooks/useDeleteMessageCallback.ts b/src/modules/OpenChannel/context/hooks/useDeleteMessageCallback.ts
index 581641982..a46247168 100644
--- a/src/modules/OpenChannel/context/hooks/useDeleteMessageCallback.ts
+++ b/src/modules/OpenChannel/context/hooks/useDeleteMessageCallback.ts
@@ -6,7 +6,7 @@ import { SendableMessageType } from '../../../../utils';
 import { Logger } from '../../../../lib/SendbirdState';
 
 interface DynamicParams {
-  currentOpenChannel: OpenChannel;
+  currentOpenChannel: OpenChannel | null;
 }
 
 type MessagesDispatcherType = {
@@ -46,7 +46,7 @@ function useDeleteMessageCallback(
         return;
       }
       const messageToDelete = message as UserMessage;
-      currentOpenChannel.deleteMessage(messageToDelete).then(() => {
+      currentOpenChannel?.deleteMessage(messageToDelete).then(() => {
         logger.info('OpenChannel | useDeleteMessageCallback: Deleting message on server', sendingStatus);
         if (callback) {
           callback();
diff --git a/src/modules/OpenChannel/context/hooks/useFileUploadCallback.tsx b/src/modules/OpenChannel/context/hooks/useFileUploadCallback.tsx
index cb71c1676..e29024ac2 100644
--- a/src/modules/OpenChannel/context/hooks/useFileUploadCallback.tsx
+++ b/src/modules/OpenChannel/context/hooks/useFileUploadCallback.tsx
@@ -16,8 +16,8 @@ import { ModalFooter } from '../../../../ui/Modal';
 import { ButtonTypes } from '../../../../ui/Button';
 
 interface DynamicParams {
-  currentOpenChannel: OpenChannel;
-  onBeforeSendFileMessage: (file: File) => FileMessageCreateParams;
+  currentOpenChannel: OpenChannel | null;
+  onBeforeSendFileMessage?: (file: File) => FileMessageCreateParams;
   checkScrollBottom: () => boolean;
   imageCompression?: ImageCompressionOptions;
 }
@@ -25,7 +25,7 @@ interface StaticParams {
   sdk: SdkStore['sdk'];
   logger: Logger;
   messagesDispatcher: (props: { type: string, payload: any }) => void;
-  scrollRef: React.MutableRefObject<HTMLElement>;
+  scrollRef: React.RefObject<HTMLElement>;
 }
 
 type CallbackReturn = (files: Array<File> | File) => void;
@@ -51,9 +51,9 @@ function useFileUploadCallback({
       const file = Array.isArray(files) ? files[0] : files;
       const createCustomParams = onBeforeSendFileMessage && typeof onBeforeSendFileMessage === 'function';
 
-      const createParamsDefault = (file_): FileMessageCreateParams => {
+      const createParamsDefault = (file: File): FileMessageCreateParams => {
         const params: FileMessageCreateParams = {};
-        params.file = file_;
+        params.file = file;
         return params;
       };
 
@@ -96,7 +96,7 @@ function useFileUploadCallback({
       const params = onBeforeSendFileMessage ? onBeforeSendFileMessage(compressedFile) : createParamsDefault(compressedFile);
       logger.info('OpenChannel | useFileUploadCallback: Uploading file message start', params);
 
-      currentOpenChannel.sendFileMessage(params)
+      currentOpenChannel?.sendFileMessage(params)
         .onPending((pendingMessage) => {
           messagesDispatcher({
             type: messageActionTypes.SENDING_MESSAGE_START,
diff --git a/src/modules/OpenChannel/context/hooks/useHandleChannelEvents.ts b/src/modules/OpenChannel/context/hooks/useHandleChannelEvents.ts
index 91a8e0e80..0391aa181 100644
--- a/src/modules/OpenChannel/context/hooks/useHandleChannelEvents.ts
+++ b/src/modules/OpenChannel/context/hooks/useHandleChannelEvents.ts
@@ -11,7 +11,7 @@ type MessagesDispatcherType = {
   type: string, payload: any,
 };
 interface DynamicParams {
-  currentOpenChannel: OpenChannel;
+  currentOpenChannel: OpenChannel | null;
   checkScrollBottom: () => boolean;
 }
 interface StaticParams {
diff --git a/src/modules/OpenChannel/context/hooks/useInitialMessagesFetch.ts b/src/modules/OpenChannel/context/hooks/useInitialMessagesFetch.ts
index e45c72a6a..fcaf124af 100644
--- a/src/modules/OpenChannel/context/hooks/useInitialMessagesFetch.ts
+++ b/src/modules/OpenChannel/context/hooks/useInitialMessagesFetch.ts
@@ -7,7 +7,7 @@ import * as messageActionTypes from '../dux/actionTypes';
 import { scrollIntoLast } from '../utils';
 
 interface DynamicParams {
-  currentOpenChannel: OpenChannel;
+  currentOpenChannel: OpenChannel | null;
   /* eslint-disable @typescript-eslint/no-explicit-any */
   userFilledMessageListParams?: Record<string, any>;
 }
@@ -37,6 +37,7 @@ function useInitialMessagesFetch(
       };
       if (userFilledMessageListParams) {
         Object.keys(userFilledMessageListParams).forEach((key) => {
+          // @ts-ignore
           messageListParams[key] = userFilledMessageListParams[key];
         });
         logger.info('OpenChannel | useInitialMessagesFetch: Used customizedMessageListParams');
diff --git a/src/modules/OpenChannel/context/hooks/useResendMessageCallback.ts b/src/modules/OpenChannel/context/hooks/useResendMessageCallback.ts
index b51d58b43..47615d182 100644
--- a/src/modules/OpenChannel/context/hooks/useResendMessageCallback.ts
+++ b/src/modules/OpenChannel/context/hooks/useResendMessageCallback.ts
@@ -5,7 +5,7 @@ import { SendableMessageType } from '../../../../utils';
 import { Logger } from '../../../../lib/SendbirdState';
 
 interface DynamicParams {
-  currentOpenChannel: OpenChannel;
+  currentOpenChannel: OpenChannel | null;
 }
 
 type MessagesDispatcherType = { type: string; payload: any };
@@ -33,7 +33,7 @@ function useResendMessageCallback(
         // userMessage
         if (failedMessage.isUserMessage()) {
           currentOpenChannel
-            .resendMessage(failedMessage)
+            ?.resendMessage(failedMessage)
             .onPending((message) => {
               messagesDispatcher({
                 type: messageActionTypes.RESENDING_MESSAGE_START,
@@ -68,7 +68,7 @@ function useResendMessageCallback(
         // fileMessage
         if (failedMessage.isFileMessage()) {
           currentOpenChannel
-            .resendMessage(failedMessage)
+            ?.resendMessage(failedMessage)
             .onPending((message) => {
               messagesDispatcher({
                 type: messageActionTypes.RESENDING_MESSAGE_START,
diff --git a/src/modules/OpenChannel/context/hooks/useScrollCallback.ts b/src/modules/OpenChannel/context/hooks/useScrollCallback.ts
index 19f409324..9bd5a95ef 100644
--- a/src/modules/OpenChannel/context/hooks/useScrollCallback.ts
+++ b/src/modules/OpenChannel/context/hooks/useScrollCallback.ts
@@ -7,7 +7,7 @@ import * as messageActionTypes from '../dux/actionTypes';
 import { SdkStore } from '../../../../lib/types';
 
 interface DynamicParams {
-  currentOpenChannel: OpenChannel;
+  currentOpenChannel: OpenChannel | null;
   lastMessageTimestamp: number;
   fetchMore?: boolean;
 }
@@ -36,6 +36,7 @@ function useScrollCallback(
 
       if (userFilledMessageListParams) {
         Object.keys(userFilledMessageListParams).forEach((key) => {
+          // @ts-ignore
           messageListParams[key] = userFilledMessageListParams[key];
         });
         logger.info('OpenChannel | useScrollCallback: Used userFilledMessageListParams', userFilledMessageListParams);
@@ -43,7 +44,7 @@ function useScrollCallback(
 
       logger.info('OpenChannel | useScrollCallback: Fetching messages', { currentOpenChannel, messageListParams });
 
-      currentOpenChannel.getMessagesByTimestamp(lastMessageTimestamp || new Date().getTime(), messageListParams).then((messages) => {
+      currentOpenChannel?.getMessagesByTimestamp(lastMessageTimestamp || new Date().getTime(), messageListParams).then((messages) => {
         logger.info('OpenChannel | useScrollCallback: Fetching messages succeeded', messages);
         const hasMore = (messages && messages.length > 0);
         const lastMessageTimestamp = hasMore ? messages[0].createdAt : null;
diff --git a/src/modules/OpenChannel/context/hooks/useSendMessageCallback.ts b/src/modules/OpenChannel/context/hooks/useSendMessageCallback.ts
index 4535d531f..fa7286aca 100644
--- a/src/modules/OpenChannel/context/hooks/useSendMessageCallback.ts
+++ b/src/modules/OpenChannel/context/hooks/useSendMessageCallback.ts
@@ -6,10 +6,11 @@ import type { Logger } from '../../../../lib/SendbirdState';
 import * as messageActionTypes from '../dux/actionTypes';
 import * as utils from '../utils';
 import { SdkStore } from '../../../../lib/types';
+import { SendableMessage } from '@sendbird/chat/lib/__definition';
 
 interface DynamicParams {
-  currentOpenChannel: OpenChannel;
-  onBeforeSendUserMessage: (text: string) => UserMessageCreateParams;
+  currentOpenChannel: OpenChannel | null;
+  onBeforeSendUserMessage?: (text: string) => UserMessageCreateParams;
   checkScrollBottom: () => boolean;
   messageInputRef: React.RefObject<HTMLInputElement>;
 }
@@ -26,7 +27,7 @@ function useSendMessageCallback(
 ): () => void {
   return useCallback(() => {
     if (sdk) {
-      const text = messageInputRef.current.innerText;
+      const text = messageInputRef.current?.innerText;
       const createParamsDefault = (txt: string | number): UserMessageCreateParams => {
         const message = txt as string;
         const params: UserMessageCreateParams = {
@@ -38,11 +39,11 @@ function useSendMessageCallback(
       if (createCustomParams) {
         logger.info('OpenChannel | useSendMessageCallback: Creating params using onBeforeSendUserMessage', onBeforeSendUserMessage);
       }
-      const params = onBeforeSendUserMessage ? onBeforeSendUserMessage(text) : createParamsDefault(text);
+      const params = onBeforeSendUserMessage ? onBeforeSendUserMessage(text ?? '') : createParamsDefault(text ?? '');
       logger.info('OpenChannel | useSendMessageCallback: Sending message has started', params);
 
-      let pendingMsg = null;
-      currentOpenChannel.sendUserMessage(params)
+      let pendingMsg: SendableMessage | undefined;
+      currentOpenChannel?.sendUserMessage(params)
         .onPending((pendingMessage) => {
           messagesDispatcher({
             type: messageActionTypes.SENDING_MESSAGE_START,
diff --git a/src/modules/OpenChannel/context/hooks/useSetChannel.ts b/src/modules/OpenChannel/context/hooks/useSetChannel.ts
index c66a30358..baef53e62 100644
--- a/src/modules/OpenChannel/context/hooks/useSetChannel.ts
+++ b/src/modules/OpenChannel/context/hooks/useSetChannel.ts
@@ -10,7 +10,7 @@ interface DynamicParams {
   sdkInit: boolean;
   fetchingParticipants: boolean;
   userId: string;
-  currentOpenChannel: OpenChannel;
+  currentOpenChannel: OpenChannel | null;
 }
 interface StaticParams {
   sdk: SdkStore['sdk'];
diff --git a/src/modules/OpenChannel/context/hooks/useTrimMessageList.ts b/src/modules/OpenChannel/context/hooks/useTrimMessageList.ts
index 63a945038..845840011 100644
--- a/src/modules/OpenChannel/context/hooks/useTrimMessageList.ts
+++ b/src/modules/OpenChannel/context/hooks/useTrimMessageList.ts
@@ -4,7 +4,7 @@ import { LoggerInterface } from '../../../../lib/Logger';
 
 interface DynamicParams {
   messagesLength: number;
-  messageLimit: number;
+  messageLimit?: number;
 }
 
 type MessagesDispatcherType = {
@@ -32,7 +32,7 @@ function useTrimMessageList(
     if (inProgress) {
       return;
     }
-    if (typeof messagesLength === 'number' && messagesLength > messageLimit) {
+    if (typeof messagesLength === 'number' && typeof messageLimit === 'number' && messagesLength > messageLimit) {
       logger.info('Trimming MessageList');
       messagesDispatcher({
         type: messageActionTypes.TRIM_MESSAGE_LIST,
diff --git a/src/modules/OpenChannel/context/hooks/useUpdateMessageCallback.ts b/src/modules/OpenChannel/context/hooks/useUpdateMessageCallback.ts
index 121e68615..f40980e4f 100644
--- a/src/modules/OpenChannel/context/hooks/useUpdateMessageCallback.ts
+++ b/src/modules/OpenChannel/context/hooks/useUpdateMessageCallback.ts
@@ -6,25 +6,24 @@ import { useCallback } from 'react';
 import * as messageActionTypes from '../dux/actionTypes';
 
 interface DynamicParams {
-  currentOpenChannel: OpenChannel;
-  onBeforeSendUserMessage?: (text) => UserMessageUpdateParams;
+  currentOpenChannel: OpenChannel | null;
+  onBeforeSendUserMessage?: (text: string) => UserMessageUpdateParams;
 }
 interface StaticParams {
   logger: Logger;
   messagesDispatcher: (props: { type: string, payload :any }) => void;
 }
-type CallbackReturn = (messageId, text, callback) => void;
+type CallbackReturn = (messageId: number, text: string, callback: () => void) => void;
 
 function useUpdateMessageCallback(
   { currentOpenChannel, onBeforeSendUserMessage }: DynamicParams,
   { logger, messagesDispatcher }: StaticParams,
 ): CallbackReturn {
   return useCallback((messageId, text, callback) => {
-    const createParamsDefault = (txt) => {
-      const params = {
+    const createParamsDefault = (txt: string) => {
+      return {
         message: txt,
       };
-      return params;
     };
 
     if (onBeforeSendUserMessage && typeof onBeforeSendUserMessage === 'function') {
diff --git a/src/modules/OpenChannel/context/utils.ts b/src/modules/OpenChannel/context/utils.ts
index 70198abd1..6ff8bd147 100644
--- a/src/modules/OpenChannel/context/utils.ts
+++ b/src/modules/OpenChannel/context/utils.ts
@@ -8,17 +8,12 @@ import { SendableMessageType } from '../../../utils';
 
 export const getMessageCreatedAt = (message: SendableMessageType): string => format(message.createdAt, 'p');
 
-export const shouldFetchMore = (messageLength: number, maxMessages: number): boolean => {
+export const shouldFetchMore = (messageLength: number, maxMessages?: number): boolean => {
   if (typeof maxMessages !== 'number') {
     return true;
   }
 
-  if (typeof maxMessages === 'number'
-    && maxMessages > messageLength
-  ) {
-    return true;
-  }
-  return false;
+  return maxMessages > messageLength;
 };
 
 /* eslint-disable default-param-last */
@@ -31,7 +26,9 @@ export const scrollIntoLast = (initialTry = 0, scrollRef: React.RefObject<HTMLEl
   try {
     const scrollDOM = scrollRef?.current || document.querySelector('.sendbird-openchannel-conversation-scroll__container__item-container');
     // eslint-disable-next-line no-multi-assign
-    scrollDOM.scrollTop = scrollDOM.scrollHeight;
+    if (scrollDOM) {
+      scrollDOM.scrollTop = scrollDOM.scrollHeight;
+    }
   } catch (error) {
     setTimeout(() => {
       scrollIntoLast(currentTry + 1, scrollRef);
@@ -59,8 +56,9 @@ export const isOperator = (openChannel: OpenChannel, userId: string): boolean =>
   return true;
 };
 
-export const isDisabledBecauseFrozen = (openChannel: OpenChannel, userId: string): boolean => {
-  const isFrozen = openChannel?.isFrozen;
+export const isDisabledBecauseFrozen = (openChannel: OpenChannel | null, userId: string): boolean => {
+  if (!openChannel) return false;
+  const isFrozen = openChannel.isFrozen;
   return isFrozen && !isOperator(openChannel, userId);
 };
 
@@ -89,16 +87,3 @@ export const fetchWithListQuery = (
   logger.info('OpenChannel | FetchUserList start', listQuery);
   fetchList(listQuery);
 };
-
-export const pxToNumber = (px: string | number): number | void => {
-  if (typeof px === 'number') {
-    return px;
-  }
-  if (typeof px === 'string') {
-    const parsed = Number.parseFloat(px);
-    if (!Number.isNaN(parsed)) {
-      return parsed;
-    }
-  }
-  return null;
-};
diff --git a/src/modules/OpenChannelApp/Community.tsx b/src/modules/OpenChannelApp/Community.tsx
index f7dacaf34..d41d6831c 100644
--- a/src/modules/OpenChannelApp/Community.tsx
+++ b/src/modules/OpenChannelApp/Community.tsx
@@ -24,7 +24,7 @@ export default function Community({
   nickname,
 }: Props): ReactElement {
   const [showSettings, setShowSettings] = useState(false);
-  const [currentChannel, setCurrentChannel] = useState<OpenChannel>(null);
+  const [currentChannel, setCurrentChannel] = useState<OpenChannel | null>(null);
   // const [channels, setChannels] = useState<Array<OpenChannel>>([]);
   return (
     <Sendbird
@@ -44,7 +44,7 @@ export default function Community({
         </div>
         <div className="community-open-channel">
           <OpenChannelConversation
-            channelUrl={currentChannel?.url}
+            channelUrl={currentChannel?.url ?? ''}
             onChatHeaderActionClick={() => {
               setShowSettings(true);
             }}
@@ -53,7 +53,7 @@ export default function Community({
         {
           showSettings && (
             <OpenChannelSettings
-              channelUrl={currentChannel?.url}
+              channelUrl={currentChannel?.url ?? ''}
               onCloseClick={() => {
                 setShowSettings(false);
               }}
diff --git a/src/modules/OpenChannelApp/Streaming.tsx b/src/modules/OpenChannelApp/Streaming.tsx
index db86cce9f..54b42f8d1 100644
--- a/src/modules/OpenChannelApp/Streaming.tsx
+++ b/src/modules/OpenChannelApp/Streaming.tsx
@@ -59,7 +59,7 @@ export default function Streaming({
 }: Props): ReactElement {
   const [showSettings, setShowSettings] = useState(false);
   const [showPanel, setShowPanel] = useState(true);
-  const [currentChannel, setCurrentChannel] = useState<OpenChannel>(null);
+  const [currentChannel, setCurrentChannel] = useState<OpenChannel | null>(null);
   const currentChannelUrl = currentChannel ? currentChannel.url : '';
   return (
     <Sendbird
diff --git a/src/modules/OpenChannelApp/components/CommunityChannelList.tsx b/src/modules/OpenChannelApp/components/CommunityChannelList.tsx
index 09cf081c1..dcd5e30d8 100644
--- a/src/modules/OpenChannelApp/components/CommunityChannelList.tsx
+++ b/src/modules/OpenChannelApp/components/CommunityChannelList.tsx
@@ -46,12 +46,12 @@ function CommunityChannelList({
   channels,
   setChannels,
 }: Props): ReactElement {
-  const [channelSource, setChannelSource] = useState<OpenChannelListQuery>(null);
+  const [channelSource, setChannelSource] = useState<OpenChannelListQuery | null>(null);
   const [showModal, setShowModal] = useState(false);
-  const [currentImage, setCurrentImage] = useState(null);
-  const [currentFile, setCurrentFile] = useState(null);
+  const [currentImage, setCurrentImage] = useState<string | null>(null);
+  const [currentFile, setCurrentFile] = useState<File | null>(null);
   const [currentChannelName, setCurrentChannelName] = useState('');
-  const hiddenInputRef = useRef(null);
+  const hiddenInputRef = useRef<HTMLInputElement>(null);
   const { stringSet } = useContext(LocalizationContext);
 
   useEffect(() => {
@@ -101,7 +101,7 @@ function CommunityChannelList({
             onSubmit={() => {
               const params: OpenChannelCreateParams = {
                 name: currentChannelName,
-                coverUrlOrImage: currentFile,
+                coverUrlOrImage: currentFile ?? undefined,
                 customType: SB_COMMUNITY_TYPE,
                 operatorUserIds: [user.userId],
               };
@@ -143,22 +143,27 @@ function CommunityChannelList({
                   Channel image
                 </Label>
                 <div className="community-channel__add-channel__image-box__body">
-                  <Avatar src={currentImage} width="80px" height="80px" />
+                  <Avatar src={currentImage ?? undefined} width="80px" height="80px" />
                   <input
                     ref={hiddenInputRef}
                     type="file"
                     accept="image/gif, image/jpeg, image/png"
                     style={{ display: 'none' }}
                     onChange={(e) => {
-                      setCurrentImage(URL.createObjectURL(e.target.files[0]));
-                      setCurrentFile(e.target.files[0]);
-                      hiddenInputRef.current.value = '';
+                      if (e.target.files) {
+                        setCurrentImage(URL.createObjectURL(e.target.files[0]));
+                        setCurrentFile(e.target.files[0]);
+                      }
+
+                      if (hiddenInputRef.current) {
+                        hiddenInputRef.current.value = '';
+                      }
                     }}
                   />
                   <TextButton
                     className="community-channel__add-channel__image-box__body__upload"
                     disableUnderline
-                    onClick={() => hiddenInputRef.current.click()}
+                    onClick={() => hiddenInputRef.current?.click()}
                   >
                     <Label
                       type={LabelTypography.BUTTON_1}
@@ -194,7 +199,7 @@ function CommunityChannelList({
         onScroll={(e: React.FormEvent<HTMLDivElement>) => {
           const target = e.target as HTMLDivElement;
           const fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
-          if (fetchMore && channelSource.hasNext) {
+          if (fetchMore && channelSource?.hasNext) {
             channelSource.next().then((openChannels) => {
               setChannels([...channels, ...openChannels]);
             });
diff --git a/src/modules/OpenChannelApp/components/DummyStream.tsx b/src/modules/OpenChannelApp/components/DummyStream.tsx
index a32987a4c..ebabe9e02 100644
--- a/src/modules/OpenChannelApp/components/DummyStream.tsx
+++ b/src/modules/OpenChannelApp/components/DummyStream.tsx
@@ -28,7 +28,7 @@ export default function DummyStream({
   currentChannel,
 }: Props): ReactElement {
   const streamInfo = useMemo(() => {
-    let channelMeta: ChannelMeta;
+    let channelMeta: ChannelMeta | null;
     try {
       channelMeta = JSON.parse(currentChannel.data);
     } catch (error) {
diff --git a/src/modules/OpenChannelApp/components/OpenChannelPreview.tsx b/src/modules/OpenChannelApp/components/OpenChannelPreview.tsx
index 29cb2f0a6..9ad3bda36 100644
--- a/src/modules/OpenChannelApp/components/OpenChannelPreview.tsx
+++ b/src/modules/OpenChannelApp/components/OpenChannelPreview.tsx
@@ -30,7 +30,7 @@ export default function OpenChannelPreview({
   isStreaming = false,
 }: Props): ReactElement {
   const streamInfo = useMemo(() => {
-    let channelMeta: ChannelMeta;
+    let channelMeta: ChannelMeta | null = null;
     if (isStreaming) {
       try {
         channelMeta = JSON.parse(channel?.data);
diff --git a/src/modules/OpenChannelList/components/OpenChannelListUI/index.tsx b/src/modules/OpenChannelList/components/OpenChannelListUI/index.tsx
index c5f009cee..60b864609 100644
--- a/src/modules/OpenChannelList/components/OpenChannelListUI/index.tsx
+++ b/src/modules/OpenChannelList/components/OpenChannelListUI/index.tsx
@@ -74,10 +74,10 @@ function OpenChannelListUI({
     setShowCreateChannel(true);
   };
 
-  const MemoizedHeader: React.ReactElement = useMemo(() => {
+  const MemoizedHeader: React.ReactElement | null = useMemo(() => {
     return renderHeader?.() || null;
   }, [renderHeader]);
-  const MemoizedPlaceHolder: React.ReactElement = useMemo(() => {
+  const MemoizedPlaceHolder: React.ReactElement | null = useMemo(() => {
     if (fetchingStatus === OpenChannelListFetchingStatus.EMPTY) {
       return renderPlaceHolderEmpty?.() || (
         <PlaceHolder
diff --git a/src/modules/OpenChannelList/context/OpenChannelListProvider.tsx b/src/modules/OpenChannelList/context/OpenChannelListProvider.tsx
index 81b5b4768..89b1bc126 100644
--- a/src/modules/OpenChannelList/context/OpenChannelListProvider.tsx
+++ b/src/modules/OpenChannelList/context/OpenChannelListProvider.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useReducer, useMemo, useEffect } from 'react';
+import React, { useContext, useReducer, useEffect } from 'react';
 
 import pubSubTopics from '../../../lib/pubSub/topics';
 import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
@@ -6,7 +6,6 @@ import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
 import openChannelListReducer from './dux/reducer';
 import openChannelListInitialState, { OpenChannelListInitialInterface } from './dux/initialState';
 import {
-  OpenChannelListFetchingStatus,
   OpenChannelListProviderProps,
   OpenChannelListProviderInterface,
   OpenChannelListDispatcherType,
@@ -16,20 +15,11 @@ import useSetupOpenChannelList from './hooks/useSetupOpenChannelList';
 import useRefreshOpenChannelList from './hooks/useRefreshOpenChannelList';
 import OpenChannelListActionTypes from './dux/actionTypes';
 
-const OpenChannelListContext = React.createContext<OpenChannelListProviderInterface | null>({
-  onChannelSelected: null,
-  currentChannel: null,
-  allChannels: [],
-  fetchingStatus: OpenChannelListFetchingStatus.EMPTY,
-  customOpenChannelListQuery: {},
-  fetchNextChannels: null,
-  refreshOpenChannelList: null,
-  openChannelListDispatcher: null,
-  logger: null,
-});
+const OpenChannelListContext = React.createContext<OpenChannelListProviderInterface | null>(null);
 
-export function useOpenChannelListContext(): OpenChannelListProviderInterface {
-  const context: OpenChannelListProviderInterface = useContext(OpenChannelListContext);
+export function useOpenChannelListContext() {
+  const context = useContext(OpenChannelListContext);
+  if (!context) throw new Error('OpenChannelListContext not found. Use within the OpenChannelList module.');
   return context;
 }
 
@@ -44,9 +34,7 @@ export const OpenChannelListProvider: React.FC<OpenChannelListProviderProps> = (
   const { logger, pubSub } = config;
   const sdk = stores?.sdkStore?.sdk || null;
   const sdkInitialized = stores?.sdkStore?.initialized || false;
-  const customOpenChannelListQuery = useMemo(() => {
-    return queries?.openChannelListQuery || null;
-  }, [queries?.openChannelListQuery]);
+  const customOpenChannelListQuery = queries?.openChannelListQuery;
 
   // dux
   const [openChannelListStore, openChannelListDispatcher]: [OpenChannelListInitialInterface, OpenChannelListDispatcherType] = useReducer(
@@ -72,10 +60,10 @@ export const OpenChannelListProvider: React.FC<OpenChannelListProviderProps> = (
 
   // Events & PubSub
   useEffect(() => {
-    const subscriber = pubSub?.subscribe ? new Map() : null;
-    subscriber?.set(
+    const subscriber = new Map<string, { remove:() => void }>();
+    subscriber.set(
       pubSubTopics.UPDATE_OPEN_CHANNEL,
-      pubSub?.subscribe(pubSubTopics.UPDATE_OPEN_CHANNEL, (channel) => {
+      pubSub.subscribe(pubSubTopics.UPDATE_OPEN_CHANNEL, (channel) => {
         openChannelListDispatcher({
           type: OpenChannelListActionTypes.UPDATE_OPEN_CHANNEL,
           payload: channel,
@@ -83,11 +71,7 @@ export const OpenChannelListProvider: React.FC<OpenChannelListProviderProps> = (
       }),
     );
     return () => {
-      subscriber?.forEach((s) => {
-        try { s.remove(); } catch {
-          //
-        }
-      });
+      subscriber.forEach((it) => it.remove());
     };
   }, [sdkInitialized, pubSub]);
 
diff --git a/src/modules/OpenChannelList/context/hooks/createChannelListQuery.ts b/src/modules/OpenChannelList/context/hooks/createChannelListQuery.ts
index 6bc855db8..15e50af5b 100644
--- a/src/modules/OpenChannelList/context/hooks/createChannelListQuery.ts
+++ b/src/modules/OpenChannelList/context/hooks/createChannelListQuery.ts
@@ -7,7 +7,7 @@ import { SdkStore } from '../../../../lib/types';
 interface createChannelListQueryProps {
   sdk: SdkStore['sdk'];
   logMessage: string;
-  openChannelListQuery: UserFilledOpenChannelListQuery;
+  openChannelListQuery?: UserFilledOpenChannelListQuery;
   logger: Logger;
   openChannelListDispatcher: OpenChannelListDispatcherType;
 }
@@ -24,6 +24,7 @@ function createChannelListQuery({
   params.includeFrozen = true;
   if (openChannelListQuery) {
     Object.keys(openChannelListQuery).forEach((key) => {
+      // @ts-ignore
       params[key] = openChannelListQuery[key];
     });
   }
diff --git a/src/modules/OpenChannelList/context/hooks/useFetchNextCallback.ts b/src/modules/OpenChannelList/context/hooks/useFetchNextCallback.ts
index d3a1031fc..be807ef80 100644
--- a/src/modules/OpenChannelList/context/hooks/useFetchNextCallback.ts
+++ b/src/modules/OpenChannelList/context/hooks/useFetchNextCallback.ts
@@ -37,7 +37,7 @@ function useFetchNextCallback(
       });
       openChannelListQuery.next()
         .then((channelList) => {
-          callback(channelList, null);
+          callback(channelList, undefined);
           logger.info('OpenChannelList|useFetchNextCallback: Succeeded fetching channels', channelList);
           openChannelListDispatcher({
             type: OpenChannelListActionTypes.FETCH_OPEN_CHANNEL_LIST_SUCCESS,
@@ -45,7 +45,7 @@ function useFetchNextCallback(
           });
         })
         .catch((err) => {
-          callback(null, err);
+          callback(undefined, err);
           logger.error('OpenChannelList|useFetchNextCallback: Failed fetching channels', err);
           openChannelListDispatcher({
             type: OpenChannelListActionTypes.FETCH_OPEN_CHANNEL_LIST_FAILURE,
diff --git a/src/modules/OpenChannelList/context/hooks/useRefreshOpenChannelList.ts b/src/modules/OpenChannelList/context/hooks/useRefreshOpenChannelList.ts
index e52a79007..882bbcdc4 100644
--- a/src/modules/OpenChannelList/context/hooks/useRefreshOpenChannelList.ts
+++ b/src/modules/OpenChannelList/context/hooks/useRefreshOpenChannelList.ts
@@ -9,7 +9,7 @@ import { SdkStore } from '../../../../lib/types';
 interface DynamicParams {
   sdk: SdkStore['sdk'];
   sdkInitialized: boolean;
-  openChannelListQuery: UserFilledOpenChannelListQuery;
+  openChannelListQuery?: UserFilledOpenChannelListQuery;
 }
 interface StaticParams {
   logger: Logger;
diff --git a/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts b/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts
index 0307f899a..6439ebb28 100644
--- a/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts
+++ b/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts
@@ -9,7 +9,7 @@ import { SdkStore } from '../../../../lib/types';
 interface DynamicParams {
   sdk: SdkStore['sdk'];
   sdkInitialized: boolean;
-  openChannelListQuery: UserFilledOpenChannelListQuery;
+  openChannelListQuery?: UserFilledOpenChannelListQuery;
 }
 interface StaticParams {
   logger: Logger;
@@ -30,42 +30,38 @@ function useSetupOpenChannelList(
   useEffect(() => {
     if (sdkInitialized) {
       if (sdk?.openChannel) {
-        if (sdk?.openChannel?.createOpenChannelListQuery) {
-          logger.info('OpenChannelList|useSetupOpenChannelList: Setup OpenChannelList', { sdkInitialized });
-          const channelListQuery = createChannelListQuery({
-            sdk,
-            logger,
-            openChannelListQuery,
-            openChannelListDispatcher,
-            logMessage: 'OpenChannelList|useSetupOpenChannelList: Succeeded create channelListQuery',
-          });
+        logger.info('OpenChannelList|useSetupOpenChannelList: Setup OpenChannelList', { sdkInitialized });
+        const channelListQuery = createChannelListQuery({
+          sdk,
+          logger,
+          openChannelListQuery,
+          openChannelListDispatcher,
+          logMessage: 'OpenChannelList|useSetupOpenChannelList: Succeeded create channelListQuery',
+        });
 
-          if (channelListQuery?.hasNext) {
-            logger.info('OpenChannelList|useSetupOpenChannelList: Fetch channels');
-            openChannelListDispatcher({
-              type: OpenChannelListActionTypes.INIT_OPEN_CHANNEL_LIST_START,
-              payload: null,
-            });
-            channelListQuery.next()
-              .then((channelList) => {
-                logger.info('OpenChannelList|useSetupOpenChannelList: Succeeded fetching channels', channelList);
-                openChannelListDispatcher({
-                  type: OpenChannelListActionTypes.INIT_OPEN_CHANNEL_LIST_SUCCESS,
-                  payload: channelList,
-                });
-              })
-              .catch((err) => {
-                logger.error('OpenChannelList|useSetupOpenChannelList: Failed fetching channels', err);
-                openChannelListDispatcher({
-                  type: OpenChannelListActionTypes.INIT_OPEN_CHANNEL_LIST_FAILURE,
-                  payload: null,
-                });
+        if (channelListQuery?.hasNext) {
+          logger.info('OpenChannelList|useSetupOpenChannelList: Fetch channels');
+          openChannelListDispatcher({
+            type: OpenChannelListActionTypes.INIT_OPEN_CHANNEL_LIST_START,
+            payload: null,
+          });
+          channelListQuery.next()
+            .then((channelList) => {
+              logger.info('OpenChannelList|useSetupOpenChannelList: Succeeded fetching channels', channelList);
+              openChannelListDispatcher({
+                type: OpenChannelListActionTypes.INIT_OPEN_CHANNEL_LIST_SUCCESS,
+                payload: channelList,
               });
-          } else {
-            logger.info('OpenChannelList|useSetupOpenChannelList: There is no more channels');
-          }
+            })
+            .catch((err) => {
+              logger.error('OpenChannelList|useSetupOpenChannelList: Failed fetching channels', err);
+              openChannelListDispatcher({
+                type: OpenChannelListActionTypes.INIT_OPEN_CHANNEL_LIST_FAILURE,
+                payload: null,
+              });
+            });
         } else {
-          logger.warning('OpenChannelList|useSetupOpenChannelList: createOpenChannelListQuery is not included in the openChannel', sdk.openChannel);
+          logger.info('OpenChannelList|useSetupOpenChannelList: There is no more channels');
         }
       } else {
         logger.warning('OpenChannelList|useSetupOpenChannelList: openChannel is not included in the Chat SDK', sdk);
diff --git a/src/modules/OpenChannelSettings/components/EditDetailsModal.tsx b/src/modules/OpenChannelSettings/components/EditDetailsModal.tsx
index bbba2bfc0..514e2a8bc 100644
--- a/src/modules/OpenChannelSettings/components/EditDetailsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/EditDetailsModal.tsx
@@ -35,11 +35,11 @@ const EditDetails = (props: Props): ReactElement => {
     setChannel,
   } = useOpenChannelSettingsContext();
 
-  const inputRef = useRef(null);
-  const formRef = useRef(null);
-  const hiddenInputRef = useRef(null);
-  const [currentImg, setCurrentImg] = useState(null);
-  const [newFile, setNewFile] = useState(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const hiddenInputRef = useRef<HTMLInputElement>(null);
+  const [currentImg, setCurrentImg] = useState<string | null>(null);
+  const [newFile, setNewFile] = useState<File | null>(null);
   const { stringSet } = useContext(LocalizationContext);
   const title = channel?.name;
   return (
@@ -49,20 +49,20 @@ const EditDetails = (props: Props): ReactElement => {
       submitText={stringSet.BUTTON__SAVE}
       onCancel={onCancel}
       onSubmit={() => {
-        if (title !== '' && !inputRef.current.value) {
-          if (formRef.current.reportValidity) { // might not work in explorer
+        if (title !== '' && !inputRef.current?.value) {
+          if (formRef.current?.reportValidity) { // might not work in explorer
             formRef.current.reportValidity();
           }
           return;
         }
-        const currentTitle = inputRef.current.value;
+        const currentTitle = inputRef.current?.value ?? '';
         const currentImg = newFile;
         logger.info('ChannelSettings: Channel information being updated');
         const params: OpenChannelUpdateParams = onBeforeUpdateChannel
-          ? onBeforeUpdateChannel(currentTitle, currentImg, channel?.data)
+          ? onBeforeUpdateChannel(currentTitle, currentImg as File, channel?.data ?? '')
           : {
             name: currentTitle,
-            coverUrlOrImage: currentImg,
+            coverUrlOrImage: currentImg ?? undefined,
             data: channel?.data,
           };
         logger.info('ChannelSettings: Updating channel information', params);
@@ -70,12 +70,12 @@ const EditDetails = (props: Props): ReactElement => {
           .then((updatedChannel) => {
             logger.info('ChannelSettings: Channel information update succeeded', updatedChannel);
             onChannelModified?.(updatedChannel);
-            setChannel(updatedChannel);
+            setChannel?.(updatedChannel);
             pubSub?.publish(pubSubTopics.UPDATE_OPEN_CHANNEL, updatedChannel);
           })
           .catch((error) => {
             logger.error('ChannelSettings: Channel infomation update failed', error);
-            setChannel(null);
+            setChannel?.(null);
           });
         onCancel();
       }}
@@ -115,14 +115,17 @@ const EditDetails = (props: Props): ReactElement => {
             accept="image/gif, image/jpeg, image/png"
             style={{ display: 'none' }}
             onChange={(e) => {
-              setCurrentImg(URL.createObjectURL(e.target.files[0]));
-              setNewFile(e.target.files[0]);
-              hiddenInputRef.current.value = '';
+              if (e.target.files) {
+                setCurrentImg(URL.createObjectURL(e.target.files[0]));
+                setNewFile(e.target.files[0]);
+              }
+              if (hiddenInputRef.current)
+                hiddenInputRef.current.value = '';
             }}
           />
           <TextButton
             className="channel-profile-form__avatar-button"
-            onClick={() => hiddenInputRef.current.click()}
+            onClick={() => hiddenInputRef.current?.click()}
             disableUnderline
           >
             <Label type={LabelTypography.BUTTON_1} color={LabelColors.PRIMARY}>
diff --git a/src/modules/OpenChannelSettings/components/InvalidChannel.tsx b/src/modules/OpenChannelSettings/components/InvalidChannel.tsx
index 5a9ebc0c3..a481f82c2 100644
--- a/src/modules/OpenChannelSettings/components/InvalidChannel.tsx
+++ b/src/modules/OpenChannelSettings/components/InvalidChannel.tsx
@@ -27,7 +27,7 @@ export default function InvalidChannel({
           height="24px"
           width="24px"
           onClick={() => {
-            onCloseClick();
+            onCloseClick?.();
           }}
         />
       </div>
diff --git a/src/modules/OpenChannelSettings/components/OpenChannelSettingsUI/index.tsx b/src/modules/OpenChannelSettings/components/OpenChannelSettingsUI/index.tsx
index fc582804a..ed55d2482 100644
--- a/src/modules/OpenChannelSettings/components/OpenChannelSettingsUI/index.tsx
+++ b/src/modules/OpenChannelSettings/components/OpenChannelSettingsUI/index.tsx
@@ -65,7 +65,7 @@ const OpenChannelUI: React.FC<OpenChannelUIProps> = ({
                 height="24px"
                 width="24px"
                 onClick={() => {
-                  onCloseClick();
+                  onCloseClick?.();
                 }}
               />
             </div>
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx
index d47a6788d..ea5227ff0 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx
@@ -14,6 +14,8 @@ import Label, {
 import { ButtonTypes } from '../../../../ui/Button';
 import UserListItem from '../../../../ui/UserListItem';
 import { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';
+import { User } from '@sendbird/chat';
+import { ParticipantListQuery } from '@sendbird/chat/openChannel';
 
 interface Props {
   onCancel(): void;
@@ -24,9 +26,9 @@ export default function AddOperatorsModal({
   onCancel,
   onSubmit,
 }: Props): ReactElement {
-  const [participants, setParticipants] = useState([]);
-  const [selectedUsers, setSelectedUsers] = useState({});
-  const [participantQuery, setParticipantQuery] = useState(null);
+  const [participants, setParticipants] = useState<User[]>([]);
+  const [selectedUsers, setSelectedUsers] = useState<Record<string, boolean>>({});
+  const [participantQuery, setParticipantQuery] = useState<ParticipantListQuery | null>(null);
   const { stringSet } = useContext(LocalizationContext);
 
   const { channel } = useOpenChannelSettingsContext();
@@ -35,10 +37,12 @@ export default function AddOperatorsModal({
     const participantListQuery = channel?.createParticipantListQuery({
       limit: 20,
     });
-    participantListQuery.next().then((users) => {
-      setParticipants(users);
-    });
-    setParticipantQuery(participantListQuery);
+    if (participantListQuery) {
+      participantListQuery.next().then((users) => {
+        setParticipants(users);
+      });
+      setParticipantQuery(participantListQuery);
+    }
   }, []);
 
   const selectedCount = Object.keys(selectedUsers).filter((m) => selectedUsers[m]).length;
@@ -66,12 +70,12 @@ export default function AddOperatorsModal({
         <div
           className="sendbird-more-users__popup-scroll"
           onScroll={(e) => {
-            const { hasNext } = participantQuery;
+            const hasNext = participantQuery ? participantQuery.hasNext : false;
             const target = e.target as HTMLTextAreaElement;
             const fetchMore = (
               target.clientHeight + target.scrollTop === target.scrollHeight
             );
-            if (hasNext && fetchMore) {
+            if (hasNext && fetchMore && participantQuery) {
               participantQuery.next().then((o) => {
                 setParticipants([
                   ...participants,
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx
index 1061fc87c..422a51e9a 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx
@@ -17,9 +17,10 @@ import { UserListItem } from '../ParticipantUI/ParticipantItem';
 import { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import { RestrictedUser } from '@sendbird/chat';
 
 export const BannedUserList = (): ReactElement => {
-  const [bannedUsers, setBannedUsers] = useState([]);
+  const [bannedUsers, setBannedUsers] = useState<RestrictedUser[]>([]);
   const [hasNext, setHasNext] = useState(false);
   const [showModal, setShowModal] = useState(false);
 
@@ -98,7 +99,7 @@ export const BannedUserList = (): ReactElement => {
                       </MenuItems>
                     )}
                   />
-                ) : null
+                ) : <></>
             )}
           />
         ))
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx
index b71bd396e..f6b02f24b 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx
@@ -15,6 +15,7 @@ import { noop } from '../../../../utils/utils';
 import { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import { BannedUserListQuery, RestrictedUser } from '@sendbird/chat';
 
 interface Props {
   onCancel(): void;
@@ -23,8 +24,8 @@ interface Props {
 export default function BannedUsersModal({
   onCancel,
 }: Props): ReactElement {
-  const [bannedUsers, setBannedUsers] = useState([]);
-  const [userListQuery, setUserListQuery] = useState(null);
+  const [bannedUsers, setBannedUsers] = useState<RestrictedUser[]>([]);
+  const [userListQuery, setUserListQuery] = useState<BannedUserListQuery | null>(null);
   const { channel } = useOpenChannelSettingsContext();
   const state = useSendbirdStateContext();
   const { stringSet } = useContext(LocalizationContext);
@@ -32,10 +33,10 @@ export default function BannedUsersModal({
 
   useEffect(() => {
     const bannedUserListQuery = channel?.createBannedUserListQuery();
-    bannedUserListQuery.next().then((users) => {
+    bannedUserListQuery?.next().then((users) => {
       setBannedUsers(users);
     });
-    setUserListQuery(bannedUserListQuery);
+    setUserListQuery(bannedUserListQuery ?? null);
   }, []);
   return (
     <div>
@@ -49,7 +50,7 @@ export default function BannedUsersModal({
         <div
           className="sendbird-more-members__popup-scroll"
           onScroll={(e) => {
-            const { hasNext } = userListQuery;
+            const hasNext = userListQuery?.hasNext;
             const target = e.target as HTMLTextAreaElement;
             const fetchMore = (
               target.clientHeight + target.scrollTop === target.scrollHeight
@@ -111,7 +112,7 @@ export default function BannedUsersModal({
                           </MenuItems>
                         )}
                       />
-                    ) : null
+                    ) : <></>
                 )
                 }
               />
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantList.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantList.tsx
index 48024ad77..8a69f4825 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantList.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantList.tsx
@@ -16,9 +16,10 @@ import MutedParticipantsModal from './MutedParticipantsModal';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
+import { RestrictedUser } from '@sendbird/chat';
 
 export const MutedParticipantList = (): ReactElement => {
-  const [mutedUsers, setMutedUsers] = useState([]);
+  const [mutedUsers, setMutedUsers] = useState<RestrictedUser[]>([]);
   const [hasNext, setHasNext] = useState(false);
   const [showModal, setShowModal] = useState(false);
 
@@ -103,7 +104,7 @@ export const MutedParticipantList = (): ReactElement => {
                       </MenuItems>
                     )}
                   />
-                ) : null
+                ) : <></>
             )}
           />
         ))
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx
index 110f78075..7b50bbdea 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx
@@ -14,6 +14,7 @@ import { noop } from '../../../../utils/utils';
 import { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
+import { MutedUserListQuery, User } from '@sendbird/chat';
 
 interface Props {
   onCancel(): void;
@@ -22,8 +23,8 @@ interface Props {
 export default function MutedParticipantsModal({
   onCancel,
 }: Props): ReactElement {
-  const [mutedUsers, setMutedUsers] = useState([]);
-  const [userListQuery, setUserListQuery] = useState(null);
+  const [mutedUsers, setMutedUsers] = useState<User[]>([]);
+  const [userListQuery, setUserListQuery] = useState<MutedUserListQuery | null>(null);
 
   const { channel } = useOpenChannelSettingsContext();
   const state = useSendbirdStateContext();
@@ -34,10 +35,10 @@ export default function MutedParticipantsModal({
     const mutedUserListQuery = channel?.createMutedUserListQuery({
       limit: 10,
     });
-    mutedUserListQuery.next().then((users) => {
+    mutedUserListQuery?.next().then((users) => {
       setMutedUsers(users);
     });
-    setUserListQuery(mutedUserListQuery);
+    if (mutedUserListQuery) { setUserListQuery(mutedUserListQuery); }
   }, []);
   return (
     <div>
@@ -51,7 +52,7 @@ export default function MutedParticipantsModal({
         <div
           className="sendbird-more-members__popup-scroll"
           onScroll={(e) => {
-            const { hasNext } = userListQuery;
+            const hasNext = userListQuery?.hasNext;
             const target = e.target as HTMLTextAreaElement;
             const fetchMore = (
               target.clientHeight + target.scrollTop === target.scrollHeight
@@ -114,7 +115,7 @@ export default function MutedParticipantsModal({
                           </MenuItems>
                         )}
                       />
-                    ) : null
+                    ) : <></>
                 )}
               />
             ))}
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/OperatorList.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/OperatorList.tsx
index 5666a38b1..d9528930d 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/OperatorList.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/OperatorList.tsx
@@ -93,7 +93,7 @@ const OperatorList = (): ReactElement => {
                       </MenuItems>
                     )}
                   />
-                ) : null
+                ) : <></>
             )}
           />
         ))
@@ -109,7 +109,7 @@ const OperatorList = (): ReactElement => {
           {stringSet.OPEN_CHANNEL_SETTINGS__OPERATORS__TITLE_ADD}
         </Button>
         {
-          channel?.operators?.length > 10 && (
+          channel?.operators && channel.operators.length > 10 && (
             <Button
               type={ButtonTypes.SECONDARY}
               size={ButtonSizes.SMALL}
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/OperatorsModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/OperatorsModal.tsx
index 50955eccc..6c557f8be 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/OperatorsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/OperatorsModal.tsx
@@ -14,12 +14,13 @@ import ContextMenu, { MenuItem, MenuItems } from '../../../../ui/ContextMenu';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
+import { OperatorListQuery, User } from '@sendbird/chat';
 
 interface Props { onCancel?(): void }
 
 export default function OperatorListModal({ onCancel }: Props): ReactElement {
-  const [users, setUsers] = useState([]);
-  const [operatorQuery, setOperatorQuery] = useState(null);
+  const [users, setUsers] = useState<User[]>([]);
+  const [operatorQuery, setOperatorQuery] = useState<OperatorListQuery | null>(null);
 
   const { channel } = useOpenChannelSettingsContext();
   const state = useSendbirdStateContext();
@@ -30,10 +31,12 @@ export default function OperatorListModal({ onCancel }: Props): ReactElement {
     const operatorListQuery = channel?.createOperatorListQuery({
       limit: 20,
     });
-    operatorListQuery.next().then((participants) => {
-      setUsers(participants);
-    });
-    setOperatorQuery(operatorListQuery);
+    if (operatorListQuery) {
+      operatorListQuery.next().then((participants) => {
+        setUsers(participants);
+      });
+      setOperatorQuery(operatorListQuery);
+    }
   }, []);
   return (
     <div>
@@ -46,7 +49,7 @@ export default function OperatorListModal({ onCancel }: Props): ReactElement {
         <div
           className="sendbird-more-users__popup-scroll"
           onScroll={(e) => {
-            const { hasNext } = operatorQuery;
+            const hasNext = operatorQuery?.hasNext;
             const target = e.target as HTMLTextAreaElement;
             const fetchMore = (
               target.clientHeight + target.scrollTop === target.scrollHeight
@@ -110,7 +113,7 @@ export default function OperatorListModal({ onCancel }: Props): ReactElement {
                           </MenuItems>
                         )}
                       />
-                    ) : null
+                    ) : <></>
                 )}
               />
             ))
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/index.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/index.tsx
index e0fac08fa..e37b11d36 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/index.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/index.tsx
@@ -66,7 +66,7 @@ export const OperatorUI: React.FC<OperatorUIProps> = ({
           height="24px"
           width="24px"
           onClick={() => {
-            onCloseClick();
+            onCloseClick?.();
           }}
         />
       </div>
@@ -84,7 +84,7 @@ export const OperatorUI: React.FC<OperatorUIProps> = ({
           height="22px"
           width="22px"
           onClick={() => {
-            copyToClipboard(channel?.url);
+            copyToClipboard(channel?.url ?? '');
           }}
         />
         <Label
diff --git a/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantItem.tsx b/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantItem.tsx
index ed029fe93..56c9af520 100644
--- a/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantItem.tsx
+++ b/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantItem.tsx
@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import type { Participant } from '@sendbird/chat';
+import { Participant, type User } from '@sendbird/chat';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 
 import { UserProfileContext } from '../../../../lib/UserProfileContext';
@@ -27,7 +27,7 @@ interface ActionProps {
   actionRef: React.RefObject<HTMLInputElement>;
 }
 interface UserListItemProps {
-  user: Participant;
+  user: User | Participant;
   currentUser?: string;
   isOperator?: boolean;
   action?(props: ActionProps): ReactElement;
@@ -61,14 +61,14 @@ export const UserListItem: React.FC<UserListItemProps> = ({
                 width={24}
                 height={24}
               />
-              {user?.isMuted ? (<MutedAvatarOverlay />) : ''}
+              {user instanceof Participant && user.isMuted ? (<MutedAvatarOverlay />) : ''}
             </>
           )}
           menuItems={(closeDropdown) => (
             renderUserProfile
               ? renderUserProfile({
                 user: user,
-                currentUserId: currentUser,
+                currentUserId: currentUser ?? '',
                 close: closeDropdown,
                 avatarRef,
               })
@@ -155,7 +155,7 @@ export default function ParticipantsAccordion(props: ParticipantsAccordionProps)
   const { channel } = useOpenChannelSettingsContext();
   const globalState = useSendbirdStateContext();
   const currentUserId = globalState?.config?.userId;
-  const [participants, setParticipants] = useState([]);
+  const [participants, setParticipants] = useState<User[]>([]);
   const [showMoreModal, setShowMoreModal] = useState(false);
   const { stringSet } = useContext(LocalizationContext);
 
diff --git a/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantsModal.tsx b/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantsModal.tsx
index bc4911da8..845c5cad6 100644
--- a/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantsModal.tsx
@@ -54,24 +54,26 @@ export default function ParticipantsModal({
         <div
           className="sendbird-more-members__popup-scroll"
           onScroll={(e) => {
-            const { hasNext } = participantListQuery;
-            const target = e.target as HTMLTextAreaElement;
-            const fetchMore = (
-              target.clientHeight + target.scrollTop === target.scrollHeight
-            );
+            if (participantListQuery) {
+              const { hasNext } = participantListQuery;
+              const target = e.target as HTMLTextAreaElement;
+              const fetchMore = (
+                target.clientHeight + target.scrollTop === target.scrollHeight
+              );
 
-            if (hasNext && fetchMore) {
-              participantListQuery.next().then((fetchedParticipants) => {
-                setParticipants([
-                  ...participants,
-                  ...fetchedParticipants,
-                ]);
-              });
+              if (hasNext && fetchMore) {
+                participantListQuery.next().then((fetchedParticipants) => {
+                  setParticipants([
+                    ...(participants ?? []),
+                    ...fetchedParticipants,
+                  ]);
+                });
+              }
             }
           }}
         >
           {
-            participants.map((p: Participant) => {
+            participants?.map((p: Participant) => {
               const isOperator = channel?.isOperator(p.userId);
               return (
                 <UserListItem
@@ -153,7 +155,7 @@ export default function ParticipantsModal({
                           )}
                         />
                       )
-                      : null
+                      : () => <></>
                   }
                 />
               );
diff --git a/src/modules/OpenChannelSettings/components/ParticipantUI/index.tsx b/src/modules/OpenChannelSettings/components/ParticipantUI/index.tsx
index 5abbd44a2..f120ff378 100644
--- a/src/modules/OpenChannelSettings/components/ParticipantUI/index.tsx
+++ b/src/modules/OpenChannelSettings/components/ParticipantUI/index.tsx
@@ -58,19 +58,21 @@ export default function ParticipantList({
     <div
       className="sendbird-openchannel-settings__participant-list"
       onScroll={(e) => {
-        const { hasNext } = participantListQuery;
-        const target = e.target as HTMLTextAreaElement;
-        const fetchMore = (
-          target.clientHeight + target.scrollTop === target.scrollHeight
-        );
+        if (participantListQuery) {
+          const { hasNext } = participantListQuery;
+          const target = e.target as HTMLTextAreaElement;
+          const fetchMore = (
+            target.clientHeight + target.scrollTop === target.scrollHeight
+          );
 
-        if (hasNext && fetchMore) {
-          participantListQuery.next().then((fetchedParticipants) => {
-            setParticipants([
-              ...participants,
-              ...fetchedParticipants,
-            ]);
-          });
+          if (hasNext && fetchMore) {
+            participantListQuery.next().then((fetchedParticipants) => {
+              setParticipants([
+                ...(participants ?? []),
+                ...fetchedParticipants,
+              ]);
+            });
+          }
         }
       }}
     >
diff --git a/src/modules/OpenChannelSettings/context/OpenChannelSettingsProvider.tsx b/src/modules/OpenChannelSettings/context/OpenChannelSettingsProvider.tsx
index fc5327e68..253c62f0c 100644
--- a/src/modules/OpenChannelSettings/context/OpenChannelSettingsProvider.tsx
+++ b/src/modules/OpenChannelSettings/context/OpenChannelSettingsProvider.tsx
@@ -22,16 +22,16 @@ export interface OpenChannelSettingsContextProps {
 
 interface OpenChannelSettingsContextType {
   channelUrl: string;
-  channel?: OpenChannel;
+  channel?: OpenChannel | null;
   isChannelInitialized: boolean;
-  setChannel?: React.Dispatch<React.SetStateAction<OpenChannel>>;
+  setChannel?: React.Dispatch<React.SetStateAction<OpenChannel | null>>;
   onCloseClick?(): void;
   onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): OpenChannelUpdateParams;
   onChannelModified?(channel: OpenChannel): void;
   onDeleteChannel?(channel: OpenChannel): void;
 }
 
-const OpenChannelSettingsContext = React.createContext<OpenChannelSettingsContextType | null>(undefined);
+const OpenChannelSettingsContext = React.createContext<OpenChannelSettingsContextType | null>(null);
 
 const OpenChannelSettingsProvider: React.FC<OpenChannelSettingsContextProps> = (props: OpenChannelSettingsContextProps) => {
   const {
@@ -163,8 +163,11 @@ const OpenChannelSettingsProvider: React.FC<OpenChannelSettingsContextProps> = (
   );
 };
 
-type useOpenChannelSettingsType = () => OpenChannelSettingsContextType;
-const useOpenChannelSettingsContext: useOpenChannelSettingsType = () => React.useContext(OpenChannelSettingsContext);
+const useOpenChannelSettingsContext = () => {
+  const context = React.useContext(OpenChannelSettingsContext);
+  if (!context) throw new Error('OpenChannelSettingsContext not found. Use within the OpenChannelSettings module.');
+  return context;
+};
 
 export {
   OpenChannelSettingsProvider,
diff --git a/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx b/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx
index a91c57395..32347a49d 100644
--- a/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx
+++ b/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx
@@ -77,7 +77,8 @@ export default function ParentMessageInfoItem({
   const statefulFileInfoList = useFileInfoListWithUploaded(message);
   const isMentionedMessage = isMentionEnabled
     && message?.mentionedMessageTemplate?.length > 0
-    && message?.mentionedUsers?.length > 0;
+    && message?.mentionedUsers
+    && message.mentionedUsers.length > 0;
 
   // Emoji reactions
   const isReactionActivated = isReactionEnabled
@@ -87,7 +88,7 @@ export default function ParentMessageInfoItem({
   const tokens = useMemo(() => {
     if (isMentionedMessage) {
       return tokenizeMessage({
-        mentionedUsers: message?.mentionedUsers,
+        mentionedUsers: message?.mentionedUsers ?? undefined,
         messageText: message?.mentionedMessageTemplate,
       });
     }
@@ -263,7 +264,7 @@ export default function ParentMessageInfoItem({
           className="sendbird-parent-message-info-item__thumbnail-message"
           onClick={() => {
             if (isSentMessage(message)) {
-              showFileViewer(true);
+              showFileViewer?.(true);
             }
           }}
         >
diff --git a/src/modules/Thread/components/ParentMessageInfo/index.tsx b/src/modules/Thread/components/ParentMessageInfo/index.tsx
index 26997d851..db6e2f269 100644
--- a/src/modules/Thread/components/ParentMessageInfo/index.tsx
+++ b/src/modules/Thread/components/ParentMessageInfo/index.tsx
@@ -28,6 +28,7 @@ import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
 import useLongPress from '../../../../hooks/useLongPress';
 import MobileMenu from '../../../../ui/MobileMenu';
 import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';
+import { User } from '@sendbird/chat';
 import { getCaseResolvedReplyType } from '../../../../lib/utils/resolvedReplyType';
 
 export interface ParentMessageInfoProps {
@@ -88,11 +89,11 @@ export default function ParentMessageInfo({
   // Mention
   const editMessageInputRef = useRef(null);
   const [mentionNickname, setMentionNickname] = useState('');
-  const [mentionedUsers, setMentionedUsers] = useState([]);
-  const [mentionedUserIds, setMentionedUserIds] = useState([]);
-  const [messageInputEvent, setMessageInputEvent] = useState(null);
-  const [selectedUser, setSelectedUser] = useState(null);
-  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
+  const [mentionedUsers, setMentionedUsers] = useState<User[]>([]);
+  const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([]);
+  const [messageInputEvent, setMessageInputEvent] = useState<React.KeyboardEvent<HTMLDivElement> | null>(null);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState<User[]>([]);
   const displaySuggestedMentionList = isOnline
     && isMentionEnabled
     && mentionNickname.length > 0
@@ -114,10 +115,9 @@ export default function ParentMessageInfo({
     }));
   }, [mentionedUserIds]);
 
-  const handleOnDownloadClick = async (e) => {
-    if (!onBeforeDownloadFileMessage) {
-      return null;
-    }
+  const handleOnDownloadClick = async (e: React.MouseEvent) => {
+    if (!onBeforeDownloadFileMessage) return;
+
     try {
       const allowDownload = await onBeforeDownloadFileMessage({ message: parentMessage as FileMessage });
       if (!allowDownload) {
@@ -141,7 +141,7 @@ export default function ParentMessageInfo({
             <SuggestedMentionList
               className="parent-message-info--suggested-mention-list"
               targetNickname={mentionNickname}
-              inputEvent={messageInputEvent}
+              inputEvent={messageInputEvent ?? undefined}
               // renderUserMentionItem={renderUserMentionItem}
               onUserItemClick={(user) => {
                 if (user) {
@@ -307,7 +307,7 @@ export default function ParentMessageInfo({
           showRemove={setShowRemove}
           setSupposedHover={setSupposedHover}
           onMoveToParentMessage={() => {
-            onMoveToParentMessage({ message: parentMessage, channel: currentChannel });
+            onMoveToParentMessage?.({ message: parentMessage, channel: currentChannel });
           }}
           deleteMessage={deleteMessage}
         />
diff --git a/src/modules/Thread/components/RemoveMessageModal.tsx b/src/modules/Thread/components/RemoveMessageModal.tsx
index 2c2395279..f5db80bf9 100644
--- a/src/modules/Thread/components/RemoveMessageModal.tsx
+++ b/src/modules/Thread/components/RemoveMessageModal.tsx
@@ -26,7 +26,7 @@ const RemoveMessage: React.FC<RemoveMessageProps> = (props: RemoveMessageProps)
   return (
     <Modal
       type={ButtonTypes.DANGER}
-      disabled={message?.threadInfo?.replyCount > 0}
+      disabled={(message.threadInfo?.replyCount ?? 0) > 0}
       onCancel={onCancel}
       onSubmit={() => {
         deleteMessage(message).then(() => {
diff --git a/src/modules/Thread/components/ThreadHeader/index.tsx b/src/modules/Thread/components/ThreadHeader/index.tsx
index 24233d946..5e26c48dd 100644
--- a/src/modules/Thread/components/ThreadHeader/index.tsx
+++ b/src/modules/Thread/components/ThreadHeader/index.tsx
@@ -26,7 +26,7 @@ export default function ThreadHeader({
   const { stringSet } = useLocalization();
 
   const MemoizedActionIcon = useMemo(() => {
-    if (typeof renderActionIcon === 'function') {
+    if (typeof renderActionIcon === 'function' && onActionIconClick) {
       return renderActionIcon({ onActionIconClick });
     }
     return null;
diff --git a/src/modules/Thread/components/ThreadList/ThreadListItem.tsx b/src/modules/Thread/components/ThreadList/ThreadListItem.tsx
index 43c9b1a83..080780cb9 100644
--- a/src/modules/Thread/components/ThreadList/ThreadListItem.tsx
+++ b/src/modules/Thread/components/ThreadList/ThreadListItem.tsx
@@ -18,6 +18,7 @@ import { Role } from '../../../../lib/types';
 import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';
 import { getIsReactionEnabled } from '../../../../utils/getIsReactionEnabled';
 import { SendableMessageType } from '../../../../utils';
+import { User } from '@sendbird/chat';
 import { getCaseResolvedReplyType } from '../../../../lib/utils/resolvedReplyType';
 
 export interface ThreadListItemProps {
@@ -70,7 +71,7 @@ export default function ThreadListItem({
   const replyType = getCaseResolvedReplyType(groupChannel.replyType).upperCase;
 
   // Move to message
-  const messageScrollRef = useRef(null);
+  const messageScrollRef = useRef<HTMLDivElement>(null);
   useLayoutEffect(() => {
     if (openingMessage?.messageId === message?.messageId && messageScrollRef?.current) {
       messageScrollRef.current?.scrollIntoView({ block: 'center', inline: 'center' });
@@ -85,11 +86,11 @@ export default function ThreadListItem({
   // mention
   const editMessageInputRef = useRef(null);
   const [mentionNickname, setMentionNickname] = useState('');
-  const [mentionedUsers, setMentionedUsers] = useState([]);
-  const [mentionedUserIds, setMentionedUserIds] = useState([]);
-  const [messageInputEvent, setMessageInputEvent] = useState(null);
-  const [selectedUser, setSelectedUser] = useState(null);
-  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
+  const [mentionedUsers, setMentionedUsers] = useState<User[]>([]);
+  const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([]);
+  const [messageInputEvent, setMessageInputEvent] = useState<React.KeyboardEvent<HTMLDivElement> | null>(null);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState<User[]>([]);
   const displaySuggestedMentionList = isOnline
     && isMentionEnabled
     && mentionNickname.length > 0
@@ -132,7 +133,7 @@ export default function ThreadListItem({
           displaySuggestedMentionList && (
             <SuggestedMentionList
               targetNickname={mentionNickname}
-              inputEvent={messageInputEvent}
+              inputEvent={messageInputEvent ?? undefined}
               // renderUserMentionItem={renderUserMentionItem}
               onUserItemClick={(user) => {
                 if (user) {
@@ -262,9 +263,8 @@ export default function ThreadListItem({
             setShowFileViewer(false);
           }}
           onDownloadClick={async (e) => {
-            if (!onBeforeDownloadFileMessage) {
-              return null;
-            }
+            if (!onBeforeDownloadFileMessage) return;
+
             try {
               const allowDownload = await onBeforeDownloadFileMessage({ message: message as FileMessage | MultipleFilesMessage });
               if (!allowDownload) {
diff --git a/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx b/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
index 1e20e0f18..66bc53e33 100644
--- a/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
+++ b/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
@@ -394,9 +394,8 @@ export default function ThreadListItemContent({
           isOpenedFromThread
           deleteMessage={deleteMessage}
           onDownloadClick={async (e) => {
-            if (!onBeforeDownloadFileMessage) {
-              return null;
-            }
+            if (!onBeforeDownloadFileMessage) return;
+
             try {
               const allowDownload = await onBeforeDownloadFileMessage({ message: message as FileMessage });
               if (!allowDownload) {
diff --git a/src/modules/Thread/components/ThreadList/index.tsx b/src/modules/Thread/components/ThreadList/index.tsx
index db04250d0..dc74b9f02 100644
--- a/src/modules/Thread/components/ThreadList/index.tsx
+++ b/src/modules/Thread/components/ThreadList/index.tsx
@@ -80,7 +80,7 @@ export default function ThreadList({
 
         const handleScroll = () => {
           const current = scrollRef?.current;
-          if (current) {
+          if (current && scrollBottom) {
             const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
             if (scrollBottom < bottom) {
               current.scrollTop += bottom - scrollBottom;
diff --git a/src/modules/Thread/components/ThreadMessageInput/index.tsx b/src/modules/Thread/components/ThreadMessageInput/index.tsx
index 2682be5a1..3506cb61d 100644
--- a/src/modules/Thread/components/ThreadMessageInput/index.tsx
+++ b/src/modules/Thread/components/ThreadMessageInput/index.tsx
@@ -17,6 +17,7 @@ import { Role } from '../../../../lib/types';
 import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';
 import { useHandleUploadFiles } from '../../../Channel/context/hooks/useHandleUploadFiles';
 import { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../../Channel/context/utils';
+import { User } from '@sendbird/chat';
 
 export interface ThreadMessageInputProps {
   className?: string;
@@ -77,11 +78,11 @@ const ThreadMessageInput = (
 
   // mention
   const [mentionNickname, setMentionNickname] = useState('');
-  const [mentionedUsers, setMentionedUsers] = useState([]);
-  const [mentionedUserIds, setMentionedUserIds] = useState([]);
-  const [selectedUser, setSelectedUser] = useState(null);
-  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
-  const [messageInputEvent, setMessageInputEvent] = useState(null);
+  const [mentionedUsers, setMentionedUsers] = useState<User[]>([]);
+  const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([]);
+  const [selectedUser, setSelectedUser] = useState<User|null>(null);
+  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState<User[]>([]);
+  const [messageInputEvent, setMessageInputEvent] = useState<React.KeyboardEvent<HTMLDivElement> | null>(null);
   const [showVoiceMessageInput, setShowVoiceMessageInput] = useState(false);
   const displaySuggestedMentionList = isOnline
     && isMentionEnabled
@@ -111,7 +112,7 @@ const ThreadMessageInput = (
   }, [mentionedUserIds]);
 
   if (currentChannel?.isBroadcast && currentChannel?.myRole !== Role.OPERATOR) {
-    return null;
+    return <></>;
   }
 
   return (
@@ -120,7 +121,7 @@ const ThreadMessageInput = (
         displaySuggestedMentionList && (
           <SuggestedMentionList
             targetNickname={mentionNickname}
-            inputEvent={messageInputEvent}
+            inputEvent={messageInputEvent ?? undefined}
             // renderUserMentionItem={renderUserMentionItem}
             onUserItemClick={(user) => {
               if (user) {
diff --git a/src/modules/Thread/components/ThreadUI/index.tsx b/src/modules/Thread/components/ThreadUI/index.tsx
index a27be7a8e..c1f25f70c 100644
--- a/src/modules/Thread/components/ThreadUI/index.tsx
+++ b/src/modules/Thread/components/ThreadUI/index.tsx
@@ -116,7 +116,9 @@ const ThreadUI: React.FC<ThreadUIProps> = ({
         if (messages) {
           try {
             element.scrollTop = scrollTop_;
-            scrollRef.current.scrollTop = scrollTop_;
+            if (scrollRef.current) {
+              scrollRef.current.scrollTop = scrollTop_;
+            }
           } catch (error) {
             //
           }
@@ -137,7 +139,7 @@ const ThreadUI: React.FC<ThreadUIProps> = ({
         MemorizedHeader || (
           <ThreadHeader
             className="sendbird-thread-ui__header"
-            channelName={getChannelTitle(currentChannel, currentUserId, stringSet)}
+            channelName={getChannelTitle(currentChannel, currentUserId ?? '', stringSet)}
             onActionIconClick={onHeaderActionClick}
             onChannelNameClick={() => {
               onMoveToParentMessage?.({ message: parentMessage, channel: currentChannel });
diff --git a/src/modules/Thread/context/ThreadProvider.tsx b/src/modules/Thread/context/ThreadProvider.tsx
index a2f2c034b..baff3f4dd 100644
--- a/src/modules/Thread/context/ThreadProvider.tsx
+++ b/src/modules/Thread/context/ThreadProvider.tsx
@@ -54,13 +54,13 @@ export interface ThreadProviderInterface extends ThreadProviderProps, ThreadCont
   // hooks for fetching threads
   fetchPrevThreads: (callback?: (messages?: Array<BaseMessage>) => void) => void;
   fetchNextThreads: (callback?: (messages?: Array<BaseMessage>) => void) => void;
-  toggleReaction: (message, key, isReacted) => void;
+  toggleReaction: ReturnType<typeof useToggleReactionCallback>;
   sendMessage: (props: SendMessageParams) => void;
   sendFileMessage: (file: File, quoteMessage?: SendableMessageType) => Promise<FileMessage>;
-  sendVoiceMessage: (file: File, duration: number, quoteMessage?: SendableMessageType) => void;
+  sendVoiceMessage: ReturnType<typeof useSendVoiceMessageCallback>;
   sendMultipleFilesMessage: (files: Array<File>, quoteMessage?: SendableMessageType) => Promise<MultipleFilesMessage>,
   resendMessage: (failedMessage: SendableMessageType) => void;
-  updateMessage: (props, callback?: () => void) => void;
+  updateMessage: ReturnType<typeof useUpdateMessageCallback>;
   deleteMessage: (message: SendableMessageType) => Promise<void>;
   nicknamesMap: Map<string, string>;
 }
@@ -152,7 +152,7 @@ export const ThreadProvider = (props: ThreadProviderProps) => {
   const { initialize, loadPrevious, loadNext } = useThreadFetchers({
     parentMessage,
     // anchorMessage should be null when parentMessage doesn't exist
-    anchorMessage: propsMessage?.messageId !== propsParentMessage?.messageId ? propsMessage : undefined,
+    anchorMessage: propsMessage?.messageId !== propsParentMessage?.messageId ? propsMessage || undefined : undefined,
     logger,
     isReactionEnabled,
     threadDispatcher,
@@ -275,5 +275,8 @@ export const ThreadProvider = (props: ThreadProviderProps) => {
   );
 };
 
-export type UseThreadContextType = () => ThreadProviderInterface;
-export const useThreadContext: UseThreadContextType = () => React.useContext(ThreadContext);
+export const useThreadContext = () => {
+  const context = React.useContext(ThreadContext);
+  if (!context) throw new Error('ThreadContext not found. Use within the Thread module');
+  return context;
+};
diff --git a/src/modules/Thread/context/hooks/useDeleteMessageCallback.ts b/src/modules/Thread/context/hooks/useDeleteMessageCallback.ts
index e3c557de7..30c113931 100644
--- a/src/modules/Thread/context/hooks/useDeleteMessageCallback.ts
+++ b/src/modules/Thread/context/hooks/useDeleteMessageCallback.ts
@@ -5,7 +5,7 @@ import { ThreadContextActionTypes } from '../dux/actionTypes';
 import { SendableMessageType } from '../../../../utils';
 
 interface DynamicProps {
-  currentChannel: GroupChannel;
+  currentChannel: GroupChannel | null;
   threadDispatcher: CustomUseReducerDispatcher;
 }
 interface StaticProps {
diff --git a/src/modules/Thread/context/hooks/useGetChannel.ts b/src/modules/Thread/context/hooks/useGetChannel.ts
index 6b556db18..19b0d25f0 100644
--- a/src/modules/Thread/context/hooks/useGetChannel.ts
+++ b/src/modules/Thread/context/hooks/useGetChannel.ts
@@ -8,13 +8,13 @@ import { SdkStore } from '../../../../lib/types';
 interface DynamicProps {
   channelUrl: string;
   sdkInit: boolean;
-  message: SendableMessageType;
+  message: SendableMessageType | null;
 }
 
 interface StaticProps {
   sdk: SdkStore['sdk'];
   logger: Logger;
-  threadDispatcher: (props: { type: string, payload?: any }) => void;
+  threadDispatcher: (props: { type: string, payload: any }) => void;
 }
 
 export default function useGetChannel({
diff --git a/src/modules/Thread/context/hooks/useGetParentMessage.ts b/src/modules/Thread/context/hooks/useGetParentMessage.ts
index 2425e48c7..bc1b05185 100644
--- a/src/modules/Thread/context/hooks/useGetParentMessage.ts
+++ b/src/modules/Thread/context/hooks/useGetParentMessage.ts
@@ -9,7 +9,7 @@ import { SdkStore } from '../../../../lib/types';
 interface DynamicProps {
   channelUrl: string;
   sdkInit: boolean;
-  parentMessage?: BaseMessage;
+  parentMessage?: BaseMessage | null;
 }
 
 interface StaticProps {
@@ -29,7 +29,7 @@ export default function useGetParentMessage({
 }: StaticProps): void {
   useEffect(() => {
     // validation check
-    if (sdkInit && sdk?.message?.getMessage) {
+    if (sdkInit && sdk?.message?.getMessage && parentMessage) {
       threadDispatcher({
         type: ThreadContextActionTypes.GET_PARENT_MESSAGE_START,
         payload: null,
@@ -37,18 +37,14 @@ export default function useGetParentMessage({
       const params: MessageRetrievalParams = {
         channelUrl,
         channelType: ChannelType.GROUP,
-        messageId: parentMessage?.messageId,
+        messageId: parentMessage.messageId,
         includeMetaArray: true,
         includeReactions: true,
         includeThreadInfo: true,
         includeParentMessageInfo: true,
       };
       logger.info('Thread | useGetParentMessage: Get parent message start.', params);
-      const fetchParentMessage = async () => {
-        const data = await sdk.message.getMessage?.(params);
-        return data;
-      };
-      fetchParentMessage()
+      sdk.message.getMessage?.(params)
         .then((parentMsg) => {
           logger.info('Thread | useGetParentMessage: Get parent message succeeded.', parentMessage);
           // @ts-ignore
diff --git a/src/modules/Thread/context/hooks/useHandleChannelEvents.ts b/src/modules/Thread/context/hooks/useHandleChannelEvents.ts
index 5cea50d20..363a7e3e2 100644
--- a/src/modules/Thread/context/hooks/useHandleChannelEvents.ts
+++ b/src/modules/Thread/context/hooks/useHandleChannelEvents.ts
@@ -9,7 +9,7 @@ import * as messageActions from '../../../Channel/context/dux/actionTypes';
 
 interface DynamicProps {
   sdk: SdkStore['sdk'];
-  currentChannel: GroupChannel;
+  currentChannel: GroupChannel | null;
 }
 interface StaticProps {
   logger: Logger;
diff --git a/src/modules/Thread/context/hooks/useHandleThreadPubsubEvents.ts b/src/modules/Thread/context/hooks/useHandleThreadPubsubEvents.ts
index b2720c368..8498c0387 100644
--- a/src/modules/Thread/context/hooks/useHandleThreadPubsubEvents.ts
+++ b/src/modules/Thread/context/hooks/useHandleThreadPubsubEvents.ts
@@ -10,8 +10,8 @@ import { shouldPubSubPublishToThread } from '../../../internalInterfaces';
 
 interface DynamicProps {
   sdkInit: boolean;
-  currentChannel: GroupChannel;
-  parentMessage: SendableMessageType
+  currentChannel: GroupChannel | null;
+  parentMessage: SendableMessageType | null;
 }
 interface StaticProps {
   logger: Logger;
@@ -37,10 +37,10 @@ export default function useHandleThreadPubsubEvents({
           // TODO: const clonedMessage = cloneMessage(message);
           const pendingMessage: Record<string, any> = { ...message };
           if (message.isMultipleFilesMessage()) {
-            pendingMessage.fileInfoList = message.messageParams.fileInfoList.map((fileInfo) => ({
+            pendingMessage.fileInfoList = message?.messageParams?.fileInfoList.map((fileInfo) => ({
               ...fileInfo,
               url: URL.createObjectURL(fileInfo.file as File),
-            }));
+            })) ?? [];
           }
           threadDispatcher({
             type: ThreadContextActionTypes.SEND_MESSAGE_START,
diff --git a/src/modules/Thread/context/hooks/useResendMessageCallback.ts b/src/modules/Thread/context/hooks/useResendMessageCallback.ts
index c35ce0f96..aab62ec10 100644
--- a/src/modules/Thread/context/hooks/useResendMessageCallback.ts
+++ b/src/modules/Thread/context/hooks/useResendMessageCallback.ts
@@ -15,7 +15,7 @@ import { SendableMessageType } from '../../../../utils';
 import { PublishingModuleType } from '../../../internalInterfaces';
 
 interface DynamicProps {
-  currentChannel: GroupChannel;
+  currentChannel: GroupChannel | null;
 }
 interface StaticProps {
   logger: Logger;
@@ -149,7 +149,7 @@ export default function useResendMessageCallback({
                 publishingModules: [PublishingModuleType.THREAD],
               });
             })
-            .onFailed((error: Error, message: MultipleFilesMessage) => {
+            .onFailed((error, message) => {
               logger.warning('Thread | useResendMessageCallback: Resending MFM failed.', error);
               threadDispatcher({
                 type: ThreadContextActionTypes.SEND_MESSAGE_FAILURE,
diff --git a/src/modules/Thread/context/hooks/useSendFileMessage.ts b/src/modules/Thread/context/hooks/useSendFileMessage.ts
index b243cbd38..1c9d07924 100644
--- a/src/modules/Thread/context/hooks/useSendFileMessage.ts
+++ b/src/modules/Thread/context/hooks/useSendFileMessage.ts
@@ -11,7 +11,7 @@ import { PublishingModuleType } from './useSendMultipleFilesMessage';
 import { SCROLL_BOTTOM_DELAY_FOR_SEND } from '../../../../utils/consts';
 
 interface DynamicProps {
-  currentChannel: GroupChannel;
+  currentChannel: GroupChannel | null;
   onBeforeSendFileMessage?: (file: File, quotedMessage?: SendableMessageType) => FileMessageCreateParams;
 }
 interface StaticProps {
@@ -35,7 +35,7 @@ export default function useSendFileMessageCallback({
   pubSub,
   threadDispatcher,
 }: StaticProps): SendFileMessageFunctionType {
-  const sendMessage = useCallback((file, quoteMessage): Promise<FileMessage> => {
+  return useCallback((file, quoteMessage): Promise<FileMessage> => {
     return new Promise((resolve, reject) => {
       const createParamsDefault = () => {
         const params = {} as FileMessageCreateParams;
@@ -55,7 +55,7 @@ export default function useSendFileMessageCallback({
             type: ThreadContextActionTypes.SEND_MESSAGE_START,
             payload: {
               /* pubSub is used instead of messagesDispatcher
-              to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
+                to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
               // TODO: remove data pollution
               message: {
                 ...pendingMessage,
@@ -81,16 +81,17 @@ export default function useSendFileMessageCallback({
           });
           reject(error);
         })
-        .onSucceeded((message: FileMessage) => {
+        .onSucceeded((message) => {
           logger.info('Thread | useSendFileMessageCallback: Sending file message succeeded.', message);
           pubSub.publish(topics.SEND_FILE_MESSAGE, {
             channel: currentChannel,
-            message: message,
+            message: message as FileMessage,
             publishingModules: [PublishingModuleType.THREAD],
           });
-          resolve(message);
+          resolve(message as FileMessage);
         });
     });
-  }, [currentChannel]);
-  return sendMessage;
+  },
+  [currentChannel],
+  );
 }
diff --git a/src/modules/Thread/context/hooks/useSendUserMessageCallback.ts b/src/modules/Thread/context/hooks/useSendUserMessageCallback.ts
index a1c2b2406..ae14fa174 100644
--- a/src/modules/Thread/context/hooks/useSendUserMessageCallback.ts
+++ b/src/modules/Thread/context/hooks/useSendUserMessageCallback.ts
@@ -12,7 +12,7 @@ import { PublishingModuleType } from '../../../internalInterfaces';
 export type OnBeforeSendUserMessageType = (message: string, quoteMessage?: SendableMessageType) => UserMessageCreateParams;
 interface DynamicProps {
   isMentionEnabled: boolean;
-  currentChannel: GroupChannel;
+  currentChannel: GroupChannel | null;
   onBeforeSendUserMessage?: OnBeforeSendUserMessageType;
 }
 interface StaticProps {
diff --git a/src/modules/Thread/context/hooks/useSendVoiceMessageCallback.ts b/src/modules/Thread/context/hooks/useSendVoiceMessageCallback.ts
index 8cfbd3e82..987d73e5e 100644
--- a/src/modules/Thread/context/hooks/useSendVoiceMessageCallback.ts
+++ b/src/modules/Thread/context/hooks/useSendVoiceMessageCallback.ts
@@ -17,7 +17,7 @@ import { SendableMessageType } from '../../../../utils';
 import { PublishingModuleType } from '../../../internalInterfaces';
 
 interface DynamicParams {
-  currentChannel: GroupChannel;
+  currentChannel: GroupChannel | null;
   onBeforeSendVoiceMessage?: (file: File, quoteMessage?: SendableMessageType) => FileMessageCreateParams;
 }
 interface StaticParams {
diff --git a/src/modules/Thread/context/hooks/useThreadFetchers.ts b/src/modules/Thread/context/hooks/useThreadFetchers.ts
index f92ee021c..7947d276a 100644
--- a/src/modules/Thread/context/hooks/useThreadFetchers.ts
+++ b/src/modules/Thread/context/hooks/useThreadFetchers.ts
@@ -10,7 +10,7 @@ import { ThreadListStateTypes } from '../../types';
 
 type Params = {
   anchorMessage?: SendableMessageType;
-  parentMessage: SendableMessageType;
+  parentMessage: SendableMessageType | null;
   isReactionEnabled?: boolean;
   threadDispatcher: CustomUseReducerDispatcher;
   logger: LoggerInterface;
diff --git a/src/modules/Thread/context/hooks/useToggleReactionsCallback.ts b/src/modules/Thread/context/hooks/useToggleReactionsCallback.ts
index 7a32c3705..237b510b2 100644
--- a/src/modules/Thread/context/hooks/useToggleReactionsCallback.ts
+++ b/src/modules/Thread/context/hooks/useToggleReactionsCallback.ts
@@ -1,9 +1,10 @@
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { useCallback } from 'react';
 import { Logger } from '../../../../lib/SendbirdState';
+import { BaseMessage } from '@sendbird/chat/message';
 
 interface DynamicProps {
-  currentChannel: GroupChannel;
+  currentChannel: GroupChannel | null;
 }
 interface StaticProps {
   logger: Logger;
@@ -13,8 +14,8 @@ export default function useToggleReactionCallback({
   currentChannel,
 }: DynamicProps, {
   logger,
-}: StaticProps): (message, key, isReacted) => void {
-  return useCallback((message, key, isReacted) => {
+}: StaticProps) {
+  return useCallback((message: BaseMessage, key: string, isReacted: boolean) => {
     if (isReacted) {
       currentChannel?.deleteReaction?.(message, key)
         .then((res) => {
diff --git a/src/modules/Thread/context/hooks/useUpdateMessageCallback.ts b/src/modules/Thread/context/hooks/useUpdateMessageCallback.ts
index 75cc48b1e..db58e4a2b 100644
--- a/src/modules/Thread/context/hooks/useUpdateMessageCallback.ts
+++ b/src/modules/Thread/context/hooks/useUpdateMessageCallback.ts
@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { User } from '@sendbird/chat';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { UserMessage, UserMessageUpdateParams } from '@sendbird/chat/message';
 
@@ -9,7 +10,7 @@ import topics, { SBUGlobalPubSub } from '../../../../lib/pubSub/topics';
 import { PublishingModuleType } from '../../../internalInterfaces';
 
 interface DynamicProps {
-  currentChannel: GroupChannel;
+  currentChannel: GroupChannel | null;
   isMentionEnabled?: boolean;
 }
 interface StaticProps {
@@ -18,6 +19,13 @@ interface StaticProps {
   threadDispatcher: CustomUseReducerDispatcher;
 }
 
+type CallbackParams = {
+  messageId: number;
+  message: string;
+  mentionedUsers?: User[];
+  mentionTemplate?: string;
+};
+
 export default function useUpdateMessageCallback({
   currentChannel,
   isMentionEnabled,
@@ -27,7 +35,7 @@ export default function useUpdateMessageCallback({
   threadDispatcher,
 }: StaticProps) {
   // TODO: add type
-  return useCallback((props) => {
+  return useCallback((props: CallbackParams) => {
     const {
       messageId,
       message,
@@ -37,7 +45,7 @@ export default function useUpdateMessageCallback({
     const createParamsDefault = () => {
       const params = {} as UserMessageUpdateParams;
       params.message = message;
-      if (isMentionEnabled && mentionedUsers?.length > 0) {
+      if (isMentionEnabled && mentionedUsers && mentionedUsers?.length > 0) {
         params.mentionedUsers = mentionedUsers;
       }
       if (isMentionEnabled && mentionTemplate) {
diff --git a/src/modules/Thread/context/utils.ts b/src/modules/Thread/context/utils.ts
index b641dd8fb..162b22209 100644
--- a/src/modules/Thread/context/utils.ts
+++ b/src/modules/Thread/context/utils.ts
@@ -1,10 +1,9 @@
 import format from 'date-fns/format';
-import { GroupChannel } from '@sendbird/chat/groupChannel';
-import { BaseMessage } from '@sendbird/chat/message';
+import { GroupChannel, Member } from '@sendbird/chat/groupChannel';
 import { getOutgoingMessageState, OutgoingMessageStates } from '../../../utils/exports/getOutgoingMessageState';
 import { SendableMessageType } from '../../../utils';
 
-export const getNicknamesMapFromMembers = (members = []): Map<string, string> => {
+export const getNicknamesMapFromMembers = (members: Member[] = []): Map<string, string> => {
   const nicknamesMap = new Map();
   for (let memberIndex = 0; memberIndex < members.length; memberIndex += 1) {
     const { userId, nickname } = members[memberIndex];
@@ -13,7 +12,7 @@ export const getNicknamesMapFromMembers = (members = []): Map<string, string> =>
   return nicknamesMap;
 };
 
-export const getParentMessageFrom = (message: SendableMessageType | null): SendableMessageType | BaseMessage => {
+export const getParentMessageFrom = (message: SendableMessageType | null) => {
   if (!message) {
     return null;
   }
@@ -72,7 +71,7 @@ export const scrollIntoLast = (intialTry = 0): void => {
   try {
     const scrollDOM = document.querySelector('.sendbird-thread-ui--scroll');
     // eslint-disable-next-line no-multi-assign
-    scrollDOM.scrollTop = scrollDOM.scrollHeight;
+    if (scrollDOM) { scrollDOM.scrollTop = scrollDOM.scrollHeight; }
   } catch (error) {
     setTimeout(() => {
       scrollIntoLast(currentTry + 1);
diff --git a/src/modules/tsconfig.json b/src/modules/tsconfig.json
new file mode 100644
index 000000000..0b67c0a57
--- /dev/null
+++ b/src/modules/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strictNullChecks": false
+  }
+}
diff --git a/src/ui/Accordion/AccordionGroup.tsx b/src/ui/Accordion/AccordionGroup.tsx
index 02f3de851..cac9f9a4c 100644
--- a/src/ui/Accordion/AccordionGroup.tsx
+++ b/src/ui/Accordion/AccordionGroup.tsx
@@ -29,7 +29,7 @@ export const AccordionGroupProvider = ({
   children,
   allowMultipleOpen = false,
 }: AccordionGroupProps) => {
-  const [openedListKeys, setOpenedListKeys] = useState([]);
+  const [openedListKeys, setOpenedListKeys] = useState<string[]>([]);
 
   const addOpenedListKey: AGCType['addOpenedListKey'] = (key) => {
     setOpenedListKeys((prevList) => {
diff --git a/src/ui/AdminMessage/index.tsx b/src/ui/AdminMessage/index.tsx
index 2aedfc2c4..23a9f69de 100644
--- a/src/ui/AdminMessage/index.tsx
+++ b/src/ui/AdminMessage/index.tsx
@@ -12,7 +12,7 @@ interface AdminMessageProps {
 export default function AdminMessage({
   className = '',
   message,
-}: AdminMessageProps): ReactElement {
+}: AdminMessageProps): ReactElement | null {
   if (!(message?.isAdminMessage || message?.messageType) || !message?.isAdminMessage?.() || message?.messageType !== 'admin') {
     return null;
   }
diff --git a/src/ui/Avatar/index.tsx b/src/ui/Avatar/index.tsx
index 8644e3f4b..927ddaa3c 100644
--- a/src/ui/Avatar/index.tsx
+++ b/src/ui/Avatar/index.tsx
@@ -167,7 +167,7 @@ function Avatar(
     onClick,
     customDefaultComponent,
   }: AvatarProps,
-  ref?: RefObject<HTMLDivElement>,
+  ref: RefObject<HTMLDivElement>,
 ): ReactElement {
   return (
     <div
diff --git a/src/ui/BottomSheet/index.tsx b/src/ui/BottomSheet/index.tsx
index 0af3ff904..c8ebbaa50 100644
--- a/src/ui/BottomSheet/index.tsx
+++ b/src/ui/BottomSheet/index.tsx
@@ -20,7 +20,7 @@ const BottomSheet: React.FunctionComponent<BottomSheetProps> = (props: BottomShe
   const logger = useSendbirdStateContext()?.config?.logger;
 
   // https://github.com/testing-library/react-testing-library/issues/62#issuecomment-438653348
-  const portalRoot = useRef<HTMLElement>();
+  const portalRoot = useRef<HTMLElement| null>();
   portalRoot.current = document.getElementById(MODAL_ROOT);
   if (!portalRoot.current) {
     portalRoot.current = document.createElement('div');
@@ -46,7 +46,7 @@ const BottomSheet: React.FunctionComponent<BottomSheetProps> = (props: BottomShe
         `}
         onClick={(e) => {
           e?.stopPropagation();
-          onBackdropClick();
+          onBackdropClick?.();
         }}
       />
     </div>,
diff --git a/src/ui/Button/utils.ts b/src/ui/Button/utils.ts
index 39a25964c..beb770a44 100644
--- a/src/ui/Button/utils.ts
+++ b/src/ui/Button/utils.ts
@@ -8,7 +8,7 @@ export function changeTypeToClassName(type: ButtonTypes): string {
     case ButtonTypes.DISABLED: return 'sendbird-button--disabled';
     case ButtonTypes.WARNING: return 'sendbird-button--warning';
 
-    default: return null;
+    default: return '';
   }
 }
 
@@ -16,6 +16,6 @@ export function changeSizeToClassName(size: ButtonSizes): string {
   switch (size) {
     case ButtonSizes.BIG: return 'sendbird-button--big';
     case ButtonSizes.SMALL: return 'sendbird-button--small';
-    default: return null;
+    default: return '';
   }
 }
diff --git a/src/ui/ChannelAvatar/utils.ts b/src/ui/ChannelAvatar/utils.ts
index 45e62d26d..28f1405d9 100644
--- a/src/ui/ChannelAvatar/utils.ts
+++ b/src/ui/ChannelAvatar/utils.ts
@@ -3,13 +3,14 @@ import type { OpenChannel } from '@sendbird/chat/openChannel';
 
 export const DEFAULT_URL_PREFIX = 'https://static.sendbird.com/sample/cover/cover_';
 
-export const getOpenChannelAvatar = (channel: OpenChannel): string => {
+export const getOpenChannelAvatar = (channel?: OpenChannel | null): string | undefined => {
   if (channel?.coverUrl) {
     return channel.coverUrl;
   }
+  return undefined;
 };
 
-export const getChannelAvatarSource = (channel: GroupChannel, currentUserId: string): string | Array<string> => {
+export const getChannelAvatarSource = (channel: GroupChannel | null, currentUserId: string): string | Array<string> => {
   if (channel?.coverUrl) {
     if (!(new RegExp(`^${DEFAULT_URL_PREFIX}`).test(channel.coverUrl))) {
       return channel.coverUrl;
@@ -20,7 +21,7 @@ export const getChannelAvatarSource = (channel: GroupChannel, currentUserId: str
     .map(({ profileUrl }) => profileUrl);
 };
 
-export const generateDefaultAvatar = (channel: GroupChannel): boolean => {
+export const generateDefaultAvatar = (channel: GroupChannel | null): boolean => {
   if (channel?.coverUrl) {
     if (new RegExp(`^${DEFAULT_URL_PREFIX}`).test(channel.coverUrl)) {
       return true;
diff --git a/src/ui/ContextMenu/MenuItems.tsx b/src/ui/ContextMenu/MenuItems.tsx
index fe07b5dd8..660a8ff85 100644
--- a/src/ui/ContextMenu/MenuItems.tsx
+++ b/src/ui/ContextMenu/MenuItems.tsx
@@ -6,12 +6,12 @@ interface MenuItemsProps {
   style?: Record<string, string>;
   openLeft?: boolean;
   children: React.ReactElement | Array<React.ReactElement> | React.ReactNode;
-  parentRef: React.RefObject<HTMLElement>;
+  parentRef?: React.RefObject<HTMLElement>;
   parentContainRef?: React.RefObject<HTMLElement>;
   closeDropdown: () => void;
 }
 
-type MenuStyleType = { top?: number, left?: number };
+type MenuStyleType = { top: number, left: number };
 interface MenuItemsState {
   menuStyle: MenuStyleType;
   handleClickOutside: (e: MouseEvent) => void;
@@ -24,7 +24,7 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
   constructor(props: MenuItemsProps) {
     super(props);
     this.state = {
-      menuStyle: {},
+      menuStyle: { top: 0, left: 0 },
       handleClickOutside: () => { /* noop */ },
     };
   }
@@ -43,7 +43,7 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
   setupEvents = (): void => {
     const { closeDropdown } = this.props;
     const { menuRef } = this;
-    const handleClickOutside = (event) => {
+    const handleClickOutside = (event: any) => {
       if (menuRef?.current && !menuRef?.current?.contains?.(event.target)) {
         closeDropdown?.();
       }
@@ -101,8 +101,13 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
   };
 
   render(): ReactElement {
+    const portalElement = document.getElementById('sendbird-dropdown-portal');
+    if (!portalElement)
+      return <></>;
+
     const { menuStyle } = this.state;
     const { children, style, className = '' } = this.props;
+
     return (
       createPortal(
         (
@@ -123,7 +128,7 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
             </ul>
           </div>
         ),
-        document.getElementById('sendbird-dropdown-portal'),
+        portalElement,
       )
     );
   }
diff --git a/src/ui/DateSeparator/index.tsx b/src/ui/DateSeparator/index.tsx
index cb223416c..837976273 100644
--- a/src/ui/DateSeparator/index.tsx
+++ b/src/ui/DateSeparator/index.tsx
@@ -15,7 +15,7 @@ export interface DateSeparatorProps {
   separatorColor?: Colors;
 }
 const DateSeparator = ({
-  children = null,
+  children = undefined,
   className = '',
   separatorColor = Colors.ONBACKGROUND_4,
 }: DateSeparatorProps): ReactElement => {
diff --git a/src/ui/EmojiReactions/index.tsx b/src/ui/EmojiReactions/index.tsx
index 38635bc01..6419564bc 100644
--- a/src/ui/EmojiReactions/index.tsx
+++ b/src/ui/EmojiReactions/index.tsx
@@ -26,7 +26,7 @@ export interface EmojiReactionsProps {
   message: SendableMessageType;
   channel: Nullable<GroupChannel>;
   emojiContainer: EmojiContainer;
-  memberNicknamesMap: Map<string, string>;
+  memberNicknamesMap: Map<string, string> ;
   spaceFromTrigger?: SpaceFromTriggerType;
   isByMe?: boolean;
   toggleReaction?: (message: SendableMessageType, key: string, byMe: boolean) => void;
@@ -48,10 +48,10 @@ const EmojiReactions = ({
   let showTheReactedMembers = false;
   try {
     const { config } = useSendbirdStateContext();
-    showTheReactedMembers = getIsReactionEnabled({
+    showTheReactedMembers = channel ? getIsReactionEnabled({
       channel,
       config,
-    });
+    }) : false;
   } catch (err) {
     // TODO: Handle error
   }
diff --git a/src/ui/FileMessageItemBody/index.tsx b/src/ui/FileMessageItemBody/index.tsx
index a91961b16..d5f9b85a5 100644
--- a/src/ui/FileMessageItemBody/index.tsx
+++ b/src/ui/FileMessageItemBody/index.tsx
@@ -10,6 +10,7 @@ import { Colors } from '../../utils/color';
 import { useMediaQueryContext } from '../../lib/MediaQueryContext';
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import type { OnBeforeDownloadFileMessageType } from '../../modules/GroupChannel/context/GroupChannelProvider';
+import { LoggerInterface } from '../../lib/Logger';
 import { openURL } from '../../utils/utils';
 
 interface Props {
@@ -23,22 +24,22 @@ interface Props {
 }
 
 export default function FileMessageItemBody({
-  className,
+  className = '',
   message,
   isByMe = false,
   mouseHover = false,
   isReactionEnabled = false,
-  truncateLimit = null,
-  onBeforeDownloadFileMessage = null,
+  truncateLimit,
+  onBeforeDownloadFileMessage,
 }: Props): ReactElement {
-  let logger = null;
+  let logger: LoggerInterface | null = null;
   try {
     logger = useSendbirdStateContext()?.config?.logger;
   } catch (err) {
     // TODO: Handle error
   }
   const { isMobile } = useMediaQueryContext();
-  const truncateMaxNum = truncateLimit || (isMobile ? 20 : null);
+  const truncateMaxNum = truncateLimit ?? (isMobile ? 20 : undefined);
 
   const downloadFileWithUrl = () => openURL(message?.url);
   const handleOnClickTextButton = onBeforeDownloadFileMessage
diff --git a/src/ui/FileViewer/index.tsx b/src/ui/FileViewer/index.tsx
index 605552586..562c57cde 100644
--- a/src/ui/FileViewer/index.tsx
+++ b/src/ui/FileViewer/index.tsx
@@ -177,7 +177,7 @@ export default function FileViewer({
             return {
               name: fileInfo.fileName || '',
               type: fileInfo.mimeType || '',
-              url: fileInfo.url,
+              url: fileInfo.url || '',
             };
           })
         }
diff --git a/src/ui/ImageGrid/index.tsx b/src/ui/ImageGrid/index.tsx
index 63a07f0c1..f1c14ad0c 100644
--- a/src/ui/ImageGrid/index.tsx
+++ b/src/ui/ImageGrid/index.tsx
@@ -19,7 +19,7 @@ export default function ImageGrid({
   return (
     <div className='sendbird-image-grid-wrap'>
       <div className={getClassName([
-        className,
+        className ?? '',
         'sendbird-image-grid',
         (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',
       ])}>
diff --git a/src/ui/ImageRenderer/__tests__/getBorderRadiusForImageRenderer.spec.ts b/src/ui/ImageRenderer/__tests__/getBorderRadiusForImageRenderer.spec.ts
index 8f2e37b00..5cc185880 100644
--- a/src/ui/ImageRenderer/__tests__/getBorderRadiusForImageRenderer.spec.ts
+++ b/src/ui/ImageRenderer/__tests__/getBorderRadiusForImageRenderer.spec.ts
@@ -1,8 +1,8 @@
 import { getBorderRadiusForImageRenderer } from '../index';
 
 describe('Global-utils/getBorderRadiusForImageRenderer', () => {
-  it('when given nothing, return null', () => {
-    expect(getBorderRadiusForImageRenderer(undefined, undefined)).toBeNull();
+  it('when given nothing, return undefined', () => {
+    expect(getBorderRadiusForImageRenderer(undefined, undefined)).toBeUndefined();
   });
   it('when given borderRadius=12 only, return 12px', () => {
     expect(getBorderRadiusForImageRenderer(undefined, 12)).toBe('12px');
@@ -10,8 +10,8 @@ describe('Global-utils/getBorderRadiusForImageRenderer', () => {
   it('when given borderRadius=12px only, return 12px', () => {
     expect(getBorderRadiusForImageRenderer(undefined, '12px')).toBe('12px');
   });
-  it('when given circle=false only, return null', () => {
-    expect(getBorderRadiusForImageRenderer(false, undefined)).toBeNull();
+  it('when given circle=false only, return undefined', () => {
+    expect(getBorderRadiusForImageRenderer(false, undefined)).toBeUndefined();
   });
   it('when given circle=false and borderRadius=12, return 12px', () => {
     expect(getBorderRadiusForImageRenderer(false, 12)).toBe('12px');
diff --git a/src/ui/ImageRenderer/index.tsx b/src/ui/ImageRenderer/index.tsx
index 973197e42..5af3c544a 100644
--- a/src/ui/ImageRenderer/index.tsx
+++ b/src/ui/ImageRenderer/index.tsx
@@ -6,7 +6,7 @@ import { useDynamicSideLength } from './useDynamicSideLength';
 import { useLazyImageLoader } from '../../modules/Channel/components/Message/hooks/useLazyImageLoader';
 import { noop } from '../../utils/utils';
 
-export function getBorderRadiusForImageRenderer(circle = false, borderRadius: string | number = null): string {
+export function getBorderRadiusForImageRenderer(circle = false, borderRadius: string | number | null = null): string | undefined {
   return circle ? '50%' : numberToPx(borderRadius);
 }
 
@@ -24,14 +24,14 @@ export interface ImageRendererProps {
   className?: string | Array<string>;
   url: string;
   alt?: string;
-  width?: string | number;
-  maxSideLength?: string;
-  height?: string | number;
+  width?: string | number | null;
+  maxSideLength?: string | null;
+  height?: string | number | null;
   circle?: boolean;
   fixedSize?: boolean;
-  placeHolder?: ((props: { style: Record<string, string | number> }) => ReactElement) | ReactElement;
-  defaultComponent?: (() => ReactElement) | ReactElement;
-  borderRadius?: string | number;
+  placeHolder?: ((props: { style: Record<string, string | number> }) => ReactElement) | ReactElement | null;
+  defaultComponent?: (() => ReactElement) | ReactElement | null;
+  borderRadius?: string | number | null;
   onLoad?: () => void;
   onError?: () => void;
   shadeOnHover?: boolean;
@@ -164,8 +164,7 @@ const ImageRenderer = ({
           }}
         />}
       </div>
-    )
-  );
+    )) as React.ReactElement;
 };
 
 // Image is loaded as a background-image, but this component serves as a hidden component to receive events indicating whether the image has actually been loaded.
diff --git a/src/ui/ImageRenderer/useDynamicSideLength.ts b/src/ui/ImageRenderer/useDynamicSideLength.ts
index bc8f6fc32..202364c41 100644
--- a/src/ui/ImageRenderer/useDynamicSideLength.ts
+++ b/src/ui/ImageRenderer/useDynamicSideLength.ts
@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import { getDynamicMinLengthInPx } from './utils';
 
 interface DynamicSideLengthProps {
-  width: string | number;
-  height: string | number;
+  width: string | number | null;
+  height: string | number | null;
   maxSideLength: string | null;
   defaultMinLength: string
 }
diff --git a/src/ui/ImageRenderer/utils.ts b/src/ui/ImageRenderer/utils.ts
index 58b0087e0..158a62313 100644
--- a/src/ui/ImageRenderer/utils.ts
+++ b/src/ui/ImageRenderer/utils.ts
@@ -1,7 +1,7 @@
 import numberToPx from '../../utils/numberToPx';
 
 export function getDynamicMinLengthInPx(
-  sideLength: string | number,
+  sideLength: string | number | null,
   maxSideLength: string | null,
   defaultMinLength: string,
 ): string {
diff --git a/src/ui/Label/index.tsx b/src/ui/Label/index.tsx
index c54b2d79d..d83ceab01 100644
--- a/src/ui/Label/index.tsx
+++ b/src/ui/Label/index.tsx
@@ -13,7 +13,7 @@ type LabelProps = {
   children?: React.ReactNode;
 };
 
-export const Label = forwardRef(({ className = [], type, color, children = null }: LabelProps, ref?: RefObject<HTMLDivElement>) => {
+export const Label = forwardRef(({ className = [], type, color, children = null }: LabelProps, ref: RefObject<HTMLDivElement>) => {
   return (
     // Donot make this into div
     // Mention uses Label. If we use div, it would break the mention detection on Paste
diff --git a/src/ui/LegacyEditUserProfile/index.tsx b/src/ui/LegacyEditUserProfile/index.tsx
index b3306d8cb..097d6cc10 100644
--- a/src/ui/LegacyEditUserProfile/index.tsx
+++ b/src/ui/LegacyEditUserProfile/index.tsx
@@ -23,7 +23,7 @@ interface Props {
   user: User;
   theme?: string;
   onCancel(): void;
-  onSubmit(newFile: File, newNickname: string): void;
+  onSubmit(newFile: File | null, newNickname: string): void;
   changeTheme?(theme: string): void;
   onThemeChange?(theme: string): void;
 }
@@ -34,14 +34,14 @@ export function EditUserProfile({
   onCancel,
   onSubmit,
   changeTheme = noop,
-  onThemeChange = null,
+  onThemeChange,
 }: Props): ReactElement {
-  const hiddenInputRef = useRef(null);
-  const inputRef = useRef(null);
-  const formRef = useRef(null);
+  const hiddenInputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
   const { stringSet } = useContext(LocalizationContext);
-  const [currentImg, setCurrentImg] = useState(null);
-  const [newFile, setNewFile] = useState(null);
+  const [currentImg, setCurrentImg] = useState<string | null>(null);
+  const [newFile, setNewFile] = useState<File | null>(null);
 
   return (
     <Modal
@@ -50,13 +50,13 @@ export function EditUserProfile({
       type={ButtonTypes.PRIMARY}
       onCancel={onCancel}
       onSubmit={() => {
-        if (user.nickname !== '' && !inputRef.current.value) {
-          if (formRef.current.reportValidity) { // might not work in explorer
+        if (user.nickname !== '' && inputRef.current && !inputRef.current.value) {
+          if (formRef.current?.reportValidity) { // might not work in explorer
             formRef.current.reportValidity();
           }
           return;
         }
-        onSubmit(inputRef.current.value, newFile);
+        onSubmit(newFile, inputRef.current?.value || '');
         onCancel();
       }}
     >
@@ -82,15 +82,17 @@ export function EditUserProfile({
             accept="image/gif, image/jpeg, image/png"
             style={{ display: 'none' }}
             onChange={(e) => {
-              setCurrentImg(URL.createObjectURL(e.target.files[0]));
-              setNewFile(e.target.files[0]);
-              hiddenInputRef.current.value = '';
+              if (e.target.files && 0 < e.target.files.length) {
+                setCurrentImg(URL.createObjectURL(e.target.files[0]));
+                setNewFile(e.target.files[0]);
+                if (hiddenInputRef.current) { hiddenInputRef.current.value = ''; }
+              }
             }}
           />
           <TextButton
             className="sendbird-edit-user-profile__img__avatar-button"
             disableUnderline
-            onClick={() => hiddenInputRef.current.click()}
+            onClick={() => hiddenInputRef.current?.click()}
           >
             <Label type={LabelTypography.BUTTON_1} color={LabelColors.PRIMARY}>
               {stringSet.EDIT_PROFILE__IMAGE_UPLOAD}
@@ -161,7 +163,7 @@ export function EditUserProfile({
   );
 }
 
-const mapStoreToProps = (store) => {
+const mapStoreToProps = (store: any) => {
   return {
     theme: store.config.theme,
     changeTheme: store.config.setCurrentTheme,
diff --git a/src/ui/MentionLabel/index.tsx b/src/ui/MentionLabel/index.tsx
index 12291f556..b28c47638 100644
--- a/src/ui/MentionLabel/index.tsx
+++ b/src/ui/MentionLabel/index.tsx
@@ -28,7 +28,7 @@ export default function MentionLabel(props: MentionLabelProps): JSX.Element {
     isByMe,
   } = props;
 
-  const mentionRef = useRef();
+  const mentionRef = useRef<HTMLAnchorElement>();
 
   const sendbirdState = useSendbirdStateContext();
   const userId = sendbirdState?.config?.userId;
@@ -36,7 +36,7 @@ export default function MentionLabel(props: MentionLabelProps): JSX.Element {
   const amIBeingMentioned = userId === mentionedUserId;
   const [user, setUser] = useState<User| null>();
   const fetchUser = useCallback(
-    (toggleDropdown) => {
+    (toggleDropdown: () => void) => {
       if (user || !sdk?.createApplicationUserListQuery) {
         toggleDropdown();
         return;
diff --git a/src/ui/MessageContent/MessageProfile/index.tsx b/src/ui/MessageContent/MessageProfile/index.tsx
index bdd6a0798..d53882a84 100644
--- a/src/ui/MessageContent/MessageProfile/index.tsx
+++ b/src/ui/MessageContent/MessageProfile/index.tsx
@@ -19,7 +19,7 @@ export interface MessageProfileProps extends MessageContentProps {
 
 export default function MessageProfile(
   props: MessageProfileProps,
-): ReactElement {
+): ReactElement | null {
   const {
     message,
     channel,
diff --git a/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap b/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
index b63657108..553bea9a6 100644
--- a/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
+++ b/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
@@ -65,6 +65,7 @@ exports[`ui/MessageContent should do a snapshot test of the MessageContent DOM 1
           mock-date
         </span>
       </div>
+      0
     </div>
     <div
       class="sendbird-message-content__right   "
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index 15c9d979d..0aafb24f0 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -132,9 +132,9 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   const { logger } = config;
   const onPressUserProfileHandler = eventHandlers?.reaction?.onPressUserProfile;
   const contentRef = useRef(null);
-  const timestampRef = useRef(null);
-  const threadRepliesRef = useRef(null);
-  const feedbackButtonsRef = useRef(null);
+  const timestampRef = useRef<HTMLDivElement>();
+  const threadRepliesRef = useRef<HTMLDivElement>();
+  const feedbackButtonsRef = useRef<HTMLDivElement>();
   const { isMobile } = useMediaQueryContext();
   const [showMenu, setShowMenu] = useState(false);
 
@@ -177,13 +177,15 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   const useReplyingClassName = useReplying ? 'use-quote' : '';
 
   // Thread replies
-  const displayThreadReplies = message?.threadInfo?.replyCount > 0 && replyType === 'THREAD';
+  const displayThreadReplies = message?.threadInfo?.replyCount
+    && message.threadInfo.replyCount > 0
+    && replyType === 'THREAD';
 
   // Feedback buttons
   const isFeedbackMessage = !isByMe
-    && message?.myFeedbackStatus
+    && !!message?.myFeedbackStatus
     && message.myFeedbackStatus !== SbFeedbackStatus.NOT_APPLICABLE;
-  const isFeedbackEnabled = config?.groupChannel?.enableFeedback && isFeedbackMessage;
+  const isFeedbackEnabled = !!config?.groupChannel?.enableFeedback && isFeedbackMessage;
 
   /**
    * For TemplateMessage, do not display:
@@ -254,7 +256,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   return (
     <div
       className={getClassName([
-        className,
+        className ?? '',
         'sendbird-message-content',
         isByMeClassName,
         uiContainerType,
@@ -288,9 +290,9 @@ export default function MessageContent(props: MessageContentProps): ReactElement
               setSupposedHover,
               onReplyInThread: ({ message }) => {
                 if (threadReplySelectType === ThreadReplySelectType.THREAD) {
-                  onReplyInThread({ message });
+                  onReplyInThread?.({ message });
                 } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
-                  scrollToMessage(message.parentMessage?.createdAt, message.parentMessageId);
+                  scrollToMessage?.(message.parentMessage?.createdAt ?? 0, message.parentMessageId);
                 }
               },
               deleteMessage,
@@ -339,7 +341,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
                   (replyType === 'QUOTE_REPLY' || (replyType === 'THREAD' && threadReplySelectType === ThreadReplySelectType.PARENT))
                   && message?.parentMessage?.createdAt && message?.parentMessageId
                 ) {
-                  scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
+                  scrollToMessage?.(message.parentMessage.createdAt, message.parentMessageId);
                 }
               }}
             />
@@ -403,8 +405,8 @@ export default function MessageContent(props: MessageContentProps): ReactElement
                   message,
                   channel,
                   isByMe,
-                  emojiContainer,
-                  memberNicknamesMap: nicknamesMap,
+                  emojiContainer: emojiContainer ?? new EmojiContainer(),
+                  memberNicknamesMap: nicknamesMap ?? new Map(),
                   toggleReaction,
                   onPressUserProfile: onPressUserProfileHandler,
                 })
@@ -439,7 +441,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
           }}
         />}
         {/* thread replies */}
-        {showThreadReplies && (
+        {showThreadReplies && message?.threadInfo && (
           <ThreadReplies
             className="sendbird-message-content__middle__thread-replies"
             threadInfo={message?.threadInfo}
@@ -470,7 +472,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
                   openFeedbackFormOrMenu();
                 }
               }}
-              disabled={message?.myFeedback && message.myFeedback.rating !== FeedbackRating.GOOD}
+              disabled={!!message?.myFeedback && message.myFeedback.rating !== FeedbackRating.GOOD}
             >
               <Icon
                 type={IconTypes.FEEDBACK_LIKE}
@@ -495,7 +497,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
                   openFeedbackFormOrMenu();
                 }
               }}
-              disabled={message?.myFeedback && message.myFeedback.rating !== FeedbackRating.BAD}
+              disabled={!!message?.myFeedback && message.myFeedback.rating !== FeedbackRating.BAD}
             >
               <Icon
                 type={IconTypes.FEEDBACK_DISLIKE}
@@ -535,9 +537,9 @@ export default function MessageContent(props: MessageContentProps): ReactElement
               setSupposedHover,
               onReplyInThread: ({ message }) => {
                 if (threadReplySelectType === ThreadReplySelectType.THREAD) {
-                  onReplyInThread({ message });
+                  onReplyInThread?.({ message });
                 } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
-                  scrollToMessage(message.parentMessage?.createdAt, message.parentMessageId);
+                  scrollToMessage?.(message.parentMessage?.createdAt ?? 0, message.parentMessageId);
                 }
               },
               deleteMessage,
@@ -547,7 +549,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
       )}
 
       {
-        showMenu && isSendableMessage(message) && renderMobileMenuOnLongPress({
+        showMenu && isSendableMessage(message) && channel && renderMobileMenuOnLongPress({
           parentRef: contentRef,
           channel,
           hideMenu: () => { setShowMenu(false); },
@@ -573,7 +575,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
           },
           onDownloadClick: async (e) => {
             if (!onBeforeDownloadFileMessage) {
-              return null;
+              return;
             }
             try {
               const allowDownload = await onBeforeDownloadFileMessage({ message });
@@ -599,7 +601,9 @@ export default function MessageContent(props: MessageContentProps): ReactElement
             }}
             onRemoveFeedback={async () => {
               try {
-                await message.deleteFeedback(message.myFeedback.id);
+                if (message.myFeedback !== null) {
+                  await message.deleteFeedback(message.myFeedback.id);
+                }
               } catch (error) {
                 config?.logger?.error?.('Channel: Delete feedback failed.', error);
                 setFeedbackFailedText(stringSet.FEEDBACK_FAILED_DELETE);
@@ -616,23 +620,27 @@ export default function MessageContent(props: MessageContentProps): ReactElement
             selectedFeedback={message.myFeedback.rating}
             message={message}
             onUpdate={async (selectedFeedback: FeedbackRating, comment: string) => {
-              const newFeedback: Feedback = new Feedback({
-                id: message.myFeedback.id,
-                rating: selectedFeedback,
-                comment,
-              });
-              try {
-                await message.updateFeedback(newFeedback);
-              } catch (error) {
-                config?.logger?.error?.('Channel: Update feedback failed.', error);
-                setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SAVE);
+              if (message.myFeedback !== null) {
+                const newFeedback: Feedback = new Feedback({
+                  id: message.myFeedback.id,
+                  rating: selectedFeedback,
+                  comment,
+                });
+                try {
+                  await message.updateFeedback(newFeedback);
+                } catch (error) {
+                  config?.logger?.error?.('Channel: Update feedback failed.', error);
+                  setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SAVE);
+                }
               }
               onCloseFeedbackForm();
             }}
             onClose={onCloseFeedbackForm}
             onRemove={async () => {
               try {
-                await message.deleteFeedback(message.myFeedback.id);
+                if (message.myFeedback !== null) {
+                  await message.deleteFeedback(message.myFeedback.id);
+                }
               } catch (error) {
                 config?.logger?.error?.('Channel: Delete feedback failed.', error);
                 setFeedbackFailedText(stringSet.FEEDBACK_FAILED_DELETE);
diff --git a/src/ui/MessageFeedbackModal/index.tsx b/src/ui/MessageFeedbackModal/index.tsx
index f70c22367..490f521a2 100644
--- a/src/ui/MessageFeedbackModal/index.tsx
+++ b/src/ui/MessageFeedbackModal/index.tsx
@@ -37,9 +37,9 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
 
   const onSubmitWrapper = () => {
     if (!selectedFeedback) return;
-    const comment = inputRef.current.value ?? '';
+    const comment = inputRef.current?.value ?? '';
     if (isEdit) {
-      if (comment !== message.myFeedback.comment) {
+      if (comment !== message.myFeedback?.comment) {
         onUpdate?.(selectedFeedback, comment);
       } else {
         onClose?.();
@@ -49,8 +49,8 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
     }
   };
 
-  const modalRef = useRef(null);
-  const inputRef = useRef(null);
+  const modalRef = useRef<HTMLDivElement>();
+  const inputRef = useRef<HTMLInputElement>();
 
   const onKeyDown = useKeyDown(modalRef, {
     Enter: () => onSubmitWrapper(),
diff --git a/src/ui/MessageInput/hooks/usePaste/index.ts b/src/ui/MessageInput/hooks/usePaste/index.ts
index 8ac19773c..bc65904c8 100644
--- a/src/ui/MessageInput/hooks/usePaste/index.ts
+++ b/src/ui/MessageInput/hooks/usePaste/index.ts
@@ -37,27 +37,30 @@ export function usePaste({
     const purifier = DOMPurify(window);
     const clean = purifier.sanitize(html);
     const pasteNode = createPasteNode();
-    pasteNode.innerHTML = clean;
-    // does not have mention, continue as normal
-    if (!hasMention(pasteNode)) {
-      // to preserve space between words
-      const text = extractTextFromNodes(Array.from(pasteNode.children) as HTMLSpanElement[]);
-      document.execCommand('insertHTML', false, sanitizeString(text));
+    if (pasteNode) {
+      pasteNode.innerHTML = clean;
+      // does not have mention, continue as normal
+      if (!hasMention(pasteNode)) {
+        // to preserve space between words
+        const text = extractTextFromNodes(Array.from(pasteNode.children) as HTMLSpanElement[]);
+        document.execCommand('insertHTML', false, sanitizeString(text));
+        pasteNode.remove();
+        setIsInput(true);
+        setHeight();
+        return;
+      }
+
+      // has mention, collect leaf nodes and parse words
+      const leafNodes = getLeafNodes(pasteNode);
+      const words = domToMessageTemplate(leafNodes);
+      const mentionedUsers = channel.isGroupChannel() ? getUsersFromWords(words, channel) : [];
+
+      // side effects
+      setMentionedUsers(mentionedUsers);
+      inserTemplateToDOM(words);
       pasteNode.remove();
-      setIsInput(true);
-      setHeight();
-      return;
     }
 
-    // has mention, collect leaf nodes and parse words
-    const leafNodes = getLeafNodes(pasteNode);
-    const words = domToMessageTemplate(leafNodes);
-    const mentionedUsers = channel.isGroupChannel() ? getUsersFromWords(words, channel) : [];
-
-    // side effects
-    setMentionedUsers(mentionedUsers);
-    inserTemplateToDOM(words);
-    pasteNode.remove();
     setIsInput(true);
     setHeight();
   }, [ref, setIsInput, setHeight, channel, setMentionedUsers]);
diff --git a/src/ui/MessageInput/hooks/usePaste/types.ts b/src/ui/MessageInput/hooks/usePaste/types.ts
index 693928313..e96e44a0d 100644
--- a/src/ui/MessageInput/hooks/usePaste/types.ts
+++ b/src/ui/MessageInput/hooks/usePaste/types.ts
@@ -8,7 +8,7 @@ export type Word = {
 };
 
 export type DynamicProps = {
-  ref: React.RefObject<HTMLDivElement>;
+  ref: React.RefObject<HTMLInputElement> | null;
   channel: OpenChannel | GroupChannel;
   setMentionedUsers: React.Dispatch<React.SetStateAction<User[]>>;
   setIsInput: React.Dispatch<React.SetStateAction<boolean>>;
diff --git a/src/ui/MessageInput/hooks/usePaste/utils.ts b/src/ui/MessageInput/hooks/usePaste/utils.ts
index 8e2b1622e..edff5a1f8 100644
--- a/src/ui/MessageInput/hooks/usePaste/utils.ts
+++ b/src/ui/MessageInput/hooks/usePaste/utils.ts
@@ -83,7 +83,7 @@ export function domToMessageTemplate(nodeArray: ChildNode[]): Word[] {
     // if text node, set text
     if (currentValue instanceof Text) {
       mentionNode = false;
-      text = currentValue.textContent;
+      text = currentValue.textContent ?? '';
     }
 
     if (currentValue instanceof HTMLElement) {
diff --git a/src/ui/MessageInput/index.tsx b/src/ui/MessageInput/index.tsx
index c71f2815d..4075e7b19 100644
--- a/src/ui/MessageInput/index.tsx
+++ b/src/ui/MessageInput/index.tsx
@@ -38,20 +38,26 @@ const displayCaret = (element: HTMLInputElement, position: number) => {
   const sel = window.getSelection();
   range.setStart(element.childNodes[0], position);
   range.collapse(true);
-  sel.removeAllRanges();
-  sel.addRange(range);
+  sel?.removeAllRanges();
+  sel?.addRange(range);
   element.focus();
 };
 
-const resetInput = (ref: MutableRefObject<HTMLElement>) => {
-  try {
+const resetInput = (ref: MutableRefObject<HTMLInputElement | null> | null) => {
+  if (ref && ref.current) {
     ref.current.innerHTML = '';
-  } catch {
-    //
   }
 };
 
-const initialTargetStringInfo = {
+interface TargetStringInfo {
+  targetString: string;
+  startNodeIndex: number | null;
+  startOffsetIndex: number | null;
+  endNodeIndex: number | null;
+  endOffsetIndex: number | null;
+}
+
+const initialTargetStringInfo : TargetStringInfo = {
   targetString: '',
   startNodeIndex: null,
   startOffsetIndex: null,
@@ -137,7 +143,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
     config,
   });
 
-  const fileInputRef = useRef(null);
+  const fileInputRef = useRef<HTMLInputElement>();
   const [isInput, setIsInput] = useState(false);
   const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([]);
   const [targetStringInfo, setTargetStringInfo] = useState({ ...initialTargetStringInfo });
@@ -154,11 +160,8 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
             elem.style.height = 'auto';
             elem.style.height = `${MAX_HEIGHT}px`;
           } else {
-            elem.style.height = 'auto';
-            elem.style.height = `${elem.scrollHeight}px`;
+            elem.style.height = '';
           }
-        } else {
-          elem.style.height = '';
         }
       } catch (error) {
         // error
@@ -174,13 +177,15 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
   useEffect(() => {
     const textField = internalRef?.current;
     try {
-      textField.innerHTML = initialValue;
-      displayCaret(textField, initialValue?.length);
+      if (textField && initialValue) {
+        textField.innerHTML = initialValue;
+        displayCaret(textField, initialValue?.length);
+      }
     } catch {
       //
     }
     setMentionedUserIds([]);
-    setIsInput(textField?.textContent?.trim().length > 0);
+    setIsInput(textField?.textContent ? textField.textContent.trim().length > 0 : false);
     setHeight();
   }, [initialValue]);
 
@@ -197,38 +202,46 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
     if (isEdit && message?.messageId) {
       // const textField = document.getElementById(textFieldId);
       const textField = internalRef?.current;
-      if (isMentionEnabled && message?.mentionedUsers?.length > 0 && message?.mentionedMessageTemplate?.length > 0) {
+      if (isMentionEnabled
+        && message?.mentionedUsers
+        && message.mentionedUsers.length > 0
+        && message?.mentionedMessageTemplate
+        && message.mentionedMessageTemplate.length > 0) {
         /* mention enabled */
         const { mentionedUsers = [] } = message;
         const tokens = tokenizeMessage({
           messageText: message?.mentionedMessageTemplate,
           mentionedUsers,
         });
-        textField.innerHTML = tokens
-          .map((token) => {
-            if (token.type === TOKEN_TYPES.mention) {
-              const mentionedUser = mentionedUsers.find((user) => user.userId === token.userId);
-              const nickname = `${USER_MENTION_PREFIX}${
-                mentionedUser?.nickname || token.value || stringSet.MENTION_NAME__NO_NAME
-              }`;
-              return renderMentionLabelToString({
-                userId: token.userId,
-                nickname,
-              });
-            }
-            return sanitizeString(token.value);
-          })
-          .join(' ');
+        if (textField) {
+          textField.innerHTML = tokens
+            .map((token) => {
+              if (token.type === TOKEN_TYPES.mention) {
+                const mentionedUser = mentionedUsers.find((user) => user.userId === token.userId);
+                const nickname = `${USER_MENTION_PREFIX}${
+                  mentionedUser?.nickname || token.value || stringSet.MENTION_NAME__NO_NAME
+                }`;
+                return renderMentionLabelToString({
+                  userId: token.userId,
+                  nickname,
+                });
+              }
+              return sanitizeString(token.value);
+            })
+            .join(' ');
+        }
       } else {
         /* mention disabled */
         try {
-          textField.innerHTML = sanitizeString(message?.message);
+          if (textField) {
+            textField.innerHTML = sanitizeString(message?.message) ?? '';
+          }
         } catch {
           //
         }
         setMentionedUserIds([]);
       }
-      setIsInput(textField?.textContent?.trim().length > 0);
+      setIsInput(textField?.textContent ? textField?.textContent?.trim().length > 0 : false);
       setHeight();
     }
   }, [isEdit, message]);
@@ -236,7 +249,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
   // #Mention | Detect MentionedLabel modified
   const useMentionedLabelDetection = useCallback(() => {
     const textField = internalRef?.current;
-    if (isMentionEnabled) {
+    if (isMentionEnabled && textField) {
       const newMentionedUserIds = Array.from(textField.getElementsByClassName('sendbird-mention-user-label')).map(
         // @ts-ignore
         (node) => node?.dataset?.userid,
@@ -246,22 +259,24 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
         setMentionedUserIds(newMentionedUserIds);
       }
     }
-    setIsInput(textField.textContent?.trim().length > 0);
+    setIsInput(textField?.textContent ? textField.textContent?.trim().length > 0 : false);
   }, [targetStringInfo, isMentionEnabled]);
 
   // #Mention | Replace selected user nickname to the MentionedUserLabel
   useEffect(() => {
     if (isMentionEnabled && mentionSelectedUser) {
       const { targetString, startNodeIndex, startOffsetIndex, endNodeIndex, endOffsetIndex } = targetStringInfo;
-      if (targetString && startNodeIndex !== null && startOffsetIndex !== null) {
+      const textField = internalRef?.current;
+      if (targetString && startNodeIndex && startOffsetIndex && textField && endNodeIndex) {
         // const textField = document.getElementById(textFieldId);
-        const textField = internalRef?.current;
         const childNodes = nodeListToArray(textField?.childNodes);
+        const startNodeTextContent: string = childNodes[startNodeIndex]?.textContent ?? '';
         const frontTextNode = document?.createTextNode(
-          childNodes[startNodeIndex]?.textContent.slice(0, startOffsetIndex),
+          startNodeTextContent.slice(0, startOffsetIndex),
         );
-        const backTextNode = document?.createTextNode(
-          `\u00A0${childNodes[endNodeIndex]?.textContent.slice(endOffsetIndex)}`,
+        const endNodeTextContent: string = childNodes[endNodeIndex]?.textContent ?? '';
+        const backTextNode = endOffsetIndex && document?.createTextNode(
+          `\u00A0${endNodeTextContent.slice(endOffsetIndex)}`,
         );
         const mentionLabel = renderMentionLabelToString({
           userId: mentionSelectedUser?.userId,
@@ -276,21 +291,25 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
           backTextNode,
           ...childNodes.slice(endNodeIndex + 1),
         ];
-        textField.innerHTML = '';
-        newNodes.forEach((newNode) => {
-          textField.appendChild(newNode);
-        });
+        if (textField) {
+          textField.innerHTML = '';
+          newNodes.forEach((newNode) => {
+            if (newNode) {
+              textField.appendChild(newNode);
+            }
+          });
+        }
         onUserMentioned(mentionSelectedUser);
         if (window.getSelection || document.getSelection) {
           // set caret postion
           const selection = window.getSelection() || document.getSelection();
-          selection.removeAllRanges();
+          selection?.removeAllRanges();
           const range = new Range();
           range.selectNodeContents(textField);
           range.setStart(textField.childNodes[startNodeIndex + 2], 1);
           range.setEnd(textField.childNodes[startNodeIndex + 2], 1);
           range.collapse(false);
-          selection.addRange(range);
+          selection?.addRange(range);
           textField.focus();
         }
         setTargetStringInfo({ ...initialTargetStringInfo });
@@ -304,25 +323,29 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
   const useMentionInputDetection = useCallback(() => {
     const selection = window?.getSelection?.() || document?.getSelection?.();
     const textField = internalRef?.current;
-    if (selection.anchorNode === textField) {
+    if (selection?.anchorNode === textField) {
       onMentionStringChange('');
     }
     if (
       isMentionEnabled
+      && textField
       && selection
       && selection.anchorNode === selection.focusNode
       && selection.anchorOffset === selection.focusOffset
     ) {
       let textStack = '';
-      let startNodeIndex = null;
-      let startOffsetIndex = null;
+      let startNodeIndex: number | null = null;
+      let startOffsetIndex: number | null = null;
       for (let index = 0; index < textField.childNodes.length; index += 1) {
         const currentNode = textField.childNodes[index];
         if (currentNode.nodeType === NodeTypes.TextNode) {
           /* text node */
-          const textContent = currentNode === selection.anchorNode
-            ? currentNode?.textContent.slice(0, selection.anchorOffset) || ''
-            : currentNode?.textContent || '';
+          const textContent: string = ((): string => {
+            if (currentNode === selection.anchorNode) {
+              return currentNode?.textContent ? currentNode?.textContent.slice(0, selection.anchorOffset) : '';
+            }
+            return currentNode?.textContent ?? '';
+          })();
           if (textStack.length > 0) {
             textStack += textContent;
           } else {
@@ -351,7 +374,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
            * targetString could be ''
            * startNodeIndex and startOffsetIndex could be null
            */
-          const targetString = textStack ? textStack.slice(startOffsetIndex) : ''; // include template character
+          const targetString = textStack && startOffsetIndex ? textStack.slice(startOffsetIndex) : ''; // include template character
           setTargetStringInfo({
             targetString,
             startNodeIndex,
@@ -383,7 +406,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
   const editMessage = () => {
     const textField = internalRef?.current;
     const messageId = message?.messageId;
-    if (isEdit && messageId) {
+    if (isEdit && messageId && textField) {
       const { messageText, mentionTemplate } = extractTextAndMentions(textField.childNodes);
       const params = { messageId, message: messageText, mentionTemplate };
       onUpdateMessage(params);
@@ -426,7 +449,8 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
                 !e.shiftKey
                 && e.key === MessageInputKeys.Enter
                 && !isMobile
-                && internalRef?.current?.textContent?.trim().length > 0
+                && internalRef?.current?.textContent
+                && internalRef.current.textContent.trim().length > 0
                 && e?.nativeEvent?.isComposing !== true
                 /**
                  * NOTE: What isComposing does?
@@ -450,10 +474,10 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
               if (
                 e.key === MessageInputKeys.Backspace
                 && internalRef?.current?.childNodes?.length === 2
-                && !internalRef?.current?.childNodes?.[0]?.textContent
-                && internalRef?.current.childNodes?.[1]?.nodeType === NodeTypes.ElementNode
+                && !internalRef.current.childNodes[0].textContent
+                && internalRef.current.childNodes[1].nodeType === NodeTypes.ElementNode
               ) {
-                internalRef?.current.removeChild(internalRef?.current.childNodes[1]);
+                internalRef.current.removeChild(internalRef.current.childNodes[1]);
               }
             }
           }}
@@ -471,7 +495,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
           onInput={() => {
             setHeight();
             onStartTyping();
-            setIsInput(internalRef?.current?.textContent?.trim().length > 0);
+            setIsInput(internalRef?.current?.textContent ? internalRef.current.textContent.trim().length > 0 : false);
             useMentionedLabelDetection();
           }}
           onPaste={onPaste}
@@ -528,7 +552,9 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
                   // It will affect to <Channel /> and <Thread />
                   onChange={(event) => {
                     const { files } = event.currentTarget;
-                    onFileUpload(files && files.length === 1 ? [files[0]] : Array.from(files));
+                    if (files) {
+                      onFileUpload(files && files.length === 1 ? [files[0]] : Array.from(files));
+                    }
                     event.target.value = '';
                   }}
                   accept={getMimeTypesUIKitAccepts(acceptableMimeTypes)}
diff --git a/src/ui/MessageInput/utils.ts b/src/ui/MessageInput/utils.ts
index 1ba68a269..869ec2c56 100644
--- a/src/ui/MessageInput/utils.ts
+++ b/src/ui/MessageInput/utils.ts
@@ -13,11 +13,7 @@ export const sanitizeString = (str?: string) => {
  * @returns Array of child nodes
  */
 export const nodeListToArray = (childNodes?: Node['childNodes'] | null) => {
-  try {
-    return Array.from(childNodes);
-  } catch (error) {
-    return [];
-  }
+  return childNodes ? Array.from(childNodes) : [];
 };
 
 export function isChannelTypeSupportsMultipleFilesMessage(channel: BaseChannel) {
diff --git a/src/ui/MessageItemMenu/index.tsx b/src/ui/MessageItemMenu/index.tsx
index a9447a823..78c998323 100644
--- a/src/ui/MessageItemMenu/index.tsx
+++ b/src/ui/MessageItemMenu/index.tsx
@@ -1,10 +1,10 @@
 import './index.scss';
-import React, { MouseEvent, ReactElement, useContext, useRef } from 'react';
+import React, { ReactElement, useContext, useRef } from 'react';
 import type { UserMessage } from '@sendbird/chat/message';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { OpenChannel } from '@sendbird/chat/openChannel';
 
-import ContextMenu, { MenuItems, MenuItem } from '../ContextMenu';
+import ContextMenu, { MenuItems, MenuItem, MenuItemProps } from '../ContextMenu';
 import Icon, { IconTypes, IconColors } from '../Icon';
 import IconButton from '../IconButton';
 import {
@@ -21,17 +21,14 @@ import { Role } from '../../lib/types';
 import { ReplyType } from '../../types';
 import { deleteNullish } from '../../utils/utils';
 
-export interface MessageMenuRenderMenuItemProps {
+export interface MessageMenuRenderMenuItemProps extends Omit<MenuItemProps, 'children' | 'className'> {
   className?: string;
-  onClick?: (e: MouseEvent) => void;
-  dataSbId?: string;
-  disable?: boolean;
   text: string;
 }
 export interface MessageMenuProps {
   className?: string | Array<string>;
   message: SendableMessageType;
-  channel: GroupChannel | OpenChannel;
+  channel: GroupChannel | OpenChannel | null;
   isByMe?: boolean;
   disabled?: boolean;
   replyType?: ReplyType;
@@ -47,7 +44,7 @@ export interface MessageMenuProps {
   renderMenuItem?: (props: MessageMenuRenderMenuItemProps) => ReactElement;
 }
 
-export function MessageMenu(props: MessageMenuProps): ReactElement {
+export function MessageMenu(props: MessageMenuProps): ReactElement | null {
   const {
     className,
     message,
@@ -104,7 +101,7 @@ export function MessageMenu(props: MessageMenuProps): ReactElement {
   }
   return (
     <div
-      className={getClassName([className, 'sendbird-message-item-menu'])}
+      className={getClassName([className ?? '', 'sendbird-message-item-menu'])}
       ref={containerRef}
     >
       <ContextMenu
@@ -116,10 +113,10 @@ export function MessageMenu(props: MessageMenuProps): ReactElement {
             height="32px"
             onClick={(): void => {
               toggleDropdown();
-              setSupposedHover(true);
+              setSupposedHover?.(true);
             }}
             onBlur={(): void => {
-              setSupposedHover(false);
+              setSupposedHover?.(false);
             }}
           >
             <Icon
@@ -134,7 +131,7 @@ export function MessageMenu(props: MessageMenuProps): ReactElement {
         menuItems={(close: () => void): ReactElement => {
           const closeDropdown = (): void => {
             close();
-            setSupposedHover(false);
+            setSupposedHover?.(false);
           };
           return (
             <MenuItems
@@ -159,7 +156,7 @@ export function MessageMenu(props: MessageMenuProps): ReactElement {
                 renderMenuItem({
                   className: 'sendbird-message-item-menu__list__menu-item menu-item-reply',
                   onClick: () => {
-                    setQuoteMessage(message);
+                    setQuoteMessage?.(message);
                     closeDropdown();
                   },
                   disable: message?.parentMessageId > 0,
@@ -194,7 +191,7 @@ export function MessageMenu(props: MessageMenuProps): ReactElement {
                   className: 'sendbird-message-item-menu__list__menu-item menu-item-edit',
                   onClick: () => {
                     if (!disabled) {
-                      showEdit(true);
+                      showEdit?.(true);
                       closeDropdown();
                     }
                   },
@@ -207,7 +204,7 @@ export function MessageMenu(props: MessageMenuProps): ReactElement {
                   className: 'sendbird-message-item-menu__list__menu-item menu-item-resend',
                   onClick: () => {
                     if (!disabled) {
-                      resendMessage(message);
+                      resendMessage?.(message);
                       closeDropdown();
                     }
                   },
@@ -222,14 +219,14 @@ export function MessageMenu(props: MessageMenuProps): ReactElement {
                     if (isFailedMessage(message)) {
                       deleteMessage?.(message);
                     } else if (!disabled) {
-                      showRemove(true);
+                      showRemove?.(true);
                       closeDropdown();
                     }
                   },
                   disable: (
                     typeof disableDeleteMessage === 'boolean'
                       ? disableDeleteMessage
-                      : message?.threadInfo?.replyCount > 0
+                      : (message?.threadInfo?.replyCount ?? 0) > 0
                   ),
                   dataSbId: 'ui_message_item_menu_delete',
                   text: stringSet.MESSAGE_MENU__DELETE,
diff --git a/src/ui/MessageItemReactionMenu/index.tsx b/src/ui/MessageItemReactionMenu/index.tsx
index 4f9d7f68d..ba42f719f 100644
--- a/src/ui/MessageItemReactionMenu/index.tsx
+++ b/src/ui/MessageItemReactionMenu/index.tsx
@@ -29,7 +29,7 @@ export function MessageEmojiMenu({
   emojiContainer,
   toggleReaction,
   setSupposedHover,
-}: MessageEmojiMenuProps): ReactElement {
+}: MessageEmojiMenuProps): ReactElement | null {
   const triggerRef = useRef(null);
   const containerRef = useRef(null);
 
@@ -39,7 +39,7 @@ export function MessageEmojiMenu({
 
   return (
     <div
-      className={getClassName([className, 'sendbird-message-item-reaction-menu'])}
+      className={getClassName([className ?? '', 'sendbird-message-item-reaction-menu'])}
       ref={containerRef}
     >
       <ContextMenu
@@ -51,10 +51,10 @@ export function MessageEmojiMenu({
             height="32px"
             onClick={(): void => {
               toggleDropdown();
-              setSupposedHover(true);
+              setSupposedHover?.(true);
             }}
             onBlur={(): void => {
-              setSupposedHover(false);
+              setSupposedHover?.(false);
             }}
           >
             <Icon
@@ -69,7 +69,7 @@ export function MessageEmojiMenu({
         menuItems={(close: () => void): ReactElement => {
           const closeDropdown = (): void => {
             close();
-            setSupposedHover(false);
+            setSupposedHover?.(false);
           };
           return (
             <EmojiListItems
@@ -78,7 +78,7 @@ export function MessageEmojiMenu({
               closeDropdown={closeDropdown}
               spaceFromTrigger={spaceFromTrigger}
             >
-              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {
+              {emojiContainer && getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {
                 const isReacted: boolean = message?.reactions
                   ?.find((reaction: Reaction) => reaction.key === emoji.key)
                   ?.userIds
@@ -91,7 +91,7 @@ export function MessageEmojiMenu({
                     selected={isReacted}
                     onClick={() => {
                       closeDropdown();
-                      toggleReaction(message, emoji.key, isReacted);
+                      toggleReaction?.(message, emoji.key, isReacted);
                     }}
                     dataSbId={`ui_emoji_reactions_menu_${emoji.key}`}
                   >
diff --git a/src/ui/MessageSearchFileItem/index.tsx b/src/ui/MessageSearchFileItem/index.tsx
index c517d8228..e141bb824 100644
--- a/src/ui/MessageSearchFileItem/index.tsx
+++ b/src/ui/MessageSearchFileItem/index.tsx
@@ -44,7 +44,7 @@ export default function MessageSearchFileItem(props: Props): ReactElement {
       ].join(' ')}
       onClick={(e) => {
         e.stopPropagation();
-        onClick(message);
+        onClick?.(message);
       }}
     >
       <div className="sendbird-message-search-file-item__left">
diff --git a/src/ui/MessageSearchFileItem/utils.ts b/src/ui/MessageSearchFileItem/utils.ts
index 4ca5e77c3..ecc516123 100644
--- a/src/ui/MessageSearchFileItem/utils.ts
+++ b/src/ui/MessageSearchFileItem/utils.ts
@@ -17,7 +17,7 @@ export interface GetCreatedAtProps {
 }
 
 export function getCreatedAt({ createdAt, locale, stringSet }: GetCreatedAtProps): string {
-  const optionalParam = locale ? { locale } : null;
+  const optionalParam = { locale };
   if (!createdAt) {
     return '';
   }
diff --git a/src/ui/MessageSearchItem/getCreatedAt.ts b/src/ui/MessageSearchItem/getCreatedAt.ts
index ee5b9b638..ab2911d8c 100644
--- a/src/ui/MessageSearchItem/getCreatedAt.ts
+++ b/src/ui/MessageSearchItem/getCreatedAt.ts
@@ -16,7 +16,7 @@ export default function ({
   locale,
   stringSet,
 }: GetCreatedAtProps): string {
-  const optionalParam = locale ? { locale } : null;
+  const optionalParam = { locale };
   if (!createdAt) {
     return '';
   }
diff --git a/src/ui/MessageSearchItem/index.tsx b/src/ui/MessageSearchItem/index.tsx
index 025511dc0..6b712d9dd 100644
--- a/src/ui/MessageSearchItem/index.tsx
+++ b/src/ui/MessageSearchItem/index.tsx
@@ -36,7 +36,7 @@ export default function MessageSearchItem({
       ].join(' ')}
       onClick={(e) => {
         e.stopPropagation();
-        onClick(message);
+        onClick?.(message);
       }}
     >
       <div className="sendbird-message-search-item__left">
diff --git a/src/ui/MessageStatus/index.tsx b/src/ui/MessageStatus/index.tsx
index 147d22e5d..263f96f52 100644
--- a/src/ui/MessageStatus/index.tsx
+++ b/src/ui/MessageStatus/index.tsx
@@ -23,6 +23,23 @@ interface MessageStatusProps {
   isDateSeparatorConsidered?: boolean;
 }
 
+const iconType = {
+  [OutgoingMessageStates.SENT]: IconTypes.DONE,
+  [OutgoingMessageStates.DELIVERED]: IconTypes.DONE_ALL,
+  [OutgoingMessageStates.READ]: IconTypes.DONE_ALL,
+  [OutgoingMessageStates.FAILED]: IconTypes.ERROR,
+  [OutgoingMessageStates.PENDING]: undefined,
+  [OutgoingMessageStates.NONE]: undefined,
+};
+const iconColor = {
+  [OutgoingMessageStates.SENT]: IconColors.SENT,
+  [OutgoingMessageStates.DELIVERED]: IconColors.SENT,
+  [OutgoingMessageStates.READ]: IconColors.READ,
+  [OutgoingMessageStates.FAILED]: IconColors.ERROR,
+  [OutgoingMessageStates.PENDING]: undefined,
+  [OutgoingMessageStates.NONE]: undefined,
+};
+
 export default function MessageStatus({
   className,
   message,
@@ -35,18 +52,6 @@ export default function MessageStatus({
     (channel.isSuper || channel.isPublic || channel.isBroadcast)
     && !(status === OutgoingMessageStates.PENDING || status === OutgoingMessageStates.FAILED)
   );
-  const iconType = {
-    [OutgoingMessageStates.SENT]: IconTypes.DONE,
-    [OutgoingMessageStates.DELIVERED]: IconTypes.DONE_ALL,
-    [OutgoingMessageStates.READ]: IconTypes.DONE_ALL,
-    [OutgoingMessageStates.FAILED]: IconTypes.ERROR,
-  };
-  const iconColor = {
-    [OutgoingMessageStates.SENT]: IconColors.SENT,
-    [OutgoingMessageStates.DELIVERED]: IconColors.SENT,
-    [OutgoingMessageStates.READ]: IconColors.READ,
-    [OutgoingMessageStates.FAILED]: IconColors.ERROR,
-  };
 
   return (
     <div
@@ -72,7 +77,7 @@ export default function MessageStatus({
         <Icon
           className={`sendbird-message-status__icon ${hideMessageStatusIcon ? 'hide-icon' : ''} ${status === OutgoingMessageStates.FAILED ? '' : 'sendbird-message-status--sent'
           }`}
-          type={iconType[status] || IconTypes.ERROR}
+          type={iconType[status] ?? IconTypes.ERROR}
           fillColor={iconColor[status]}
           width="16px"
           height="16px"
diff --git a/src/ui/MobileMenu/MobileBottomSheet.tsx b/src/ui/MobileMenu/MobileBottomSheet.tsx
index 0a5285df3..190ebcc3e 100644
--- a/src/ui/MobileMenu/MobileBottomSheet.tsx
+++ b/src/ui/MobileMenu/MobileBottomSheet.tsx
@@ -37,7 +37,7 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
     resendMessage,
     deleteMessage,
     toggleReaction,
-    isReactionEnabled,
+    isReactionEnabled = false,
     showEdit,
     showRemove,
     deleteMenuState,
@@ -81,12 +81,12 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
   const fileMessage = message as FileMessage;
   const maxEmojisPerRow = Math.floor(window.innerWidth / EMOJI_SIZE) - 1;
   const [showEmojisOnly, setShowEmojisOnly] = useState<boolean>(false);
-  const emojis = getEmojiListAll(emojiContainer);
+  const emojis = emojiContainer && getEmojiListAll(emojiContainer);
   // calculate max emojis that can be shown in screen
   const visibleEmojis = showEmojisOnly
     ? emojis
     : emojis?.slice(0, maxEmojisPerRow);
-  const canShowMoreEmojis = emojis.length > maxEmojisPerRow;
+  const canShowMoreEmojis = emojis && emojis.length > maxEmojisPerRow;
   return (
     <BottomSheet onBackdropClick={hideMenu}>
       <div className='sendbird-message__bottomsheet'>
@@ -115,7 +115,7 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
                         selected={isReacted}
                         onClick={(): void => {
                           hideMenu();
-                          toggleReaction(message, emoji.key, isReacted);
+                          toggleReaction?.(message, emoji.key, isReacted);
                         }}
                         dataSbId={`ui_mobile_emoji_reactions_menu_${emoji.key}`}
                       >
@@ -199,7 +199,7 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
                     className='sendbird-message__bottomsheet--action'
                     onClick={() => {
                       hideMenu();
-                      showEdit(true);
+                      showEdit?.(true);
                     }}
                   >
                     <Icon
@@ -220,7 +220,7 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
                     className='sendbird-message__bottomsheet--action'
                     onClick={() => {
                       hideMenu();
-                      resendMessage(message);
+                      resendMessage?.(message);
                     }}
                   >
                     <Icon
@@ -246,7 +246,7 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
                     onClick={() => {
                       if (!disableReaction) {
                         hideMenu();
-                        setQuoteMessage(message);
+                        setQuoteMessage?.(message);
                       }
                     }}
                   >
diff --git a/src/ui/MobileMenu/MobileContextMenu.tsx b/src/ui/MobileMenu/MobileContextMenu.tsx
index a34f6bc12..74c00e9b8 100644
--- a/src/ui/MobileMenu/MobileContextMenu.tsx
+++ b/src/ui/MobileMenu/MobileContextMenu.tsx
@@ -103,7 +103,7 @@ const MobileContextMenu: React.FunctionComponent<BaseMenuProps> = (props: BaseMe
               className="sendbird-message__mobile-context-menu-item menu-item-reply"
               onClick={() => {
                 hideMenu();
-                setQuoteMessage(message);
+                setQuoteMessage?.(message);
               }}
               disable={(message?.parentMessageId ?? 0) > 0}
               dataSbId="ui_mobile_message_item_menu_reply"
@@ -158,7 +158,7 @@ const MobileContextMenu: React.FunctionComponent<BaseMenuProps> = (props: BaseMe
               className="sendbird-message__mobile-context-menu-item menu-item-edit"
               onClick={() => {
                 hideMenu();
-                showEdit(true);
+                showEdit?.(true);
               }}
               dataSbId="ui_mobile_message_item_menu_edit"
             >
@@ -181,7 +181,7 @@ const MobileContextMenu: React.FunctionComponent<BaseMenuProps> = (props: BaseMe
               className="sendbird-message__mobile-context-menu-item menu-item-resend"
               onClick={() => {
                 hideMenu();
-                resendMessage(message);
+                resendMessage?.(message);
               }}
               dataSbId="ui_mobile_message_item_menu_resend"
             >
diff --git a/src/ui/MultipleFilesMessageItemBody/index.tsx b/src/ui/MultipleFilesMessageItemBody/index.tsx
index fb1e5b00a..c94b673c4 100644
--- a/src/ui/MultipleFilesMessageItemBody/index.tsx
+++ b/src/ui/MultipleFilesMessageItemBody/index.tsx
@@ -55,7 +55,7 @@ export default function MultipleFilesMessageItemBody({
   }
 
   return (
-    threadMessageKindKey && (
+    threadMessageKindKey ? (
       <>
         {currentFileViewerIndex > -1 && (
           <FileViewer
@@ -66,9 +66,8 @@ export default function MultipleFilesMessageItemBody({
             onClickRight={onClickRight}
             onClose={onClose}
             onDownloadClick={async (e) => {
-              if (!onBeforeDownloadFileMessage) {
-                return null;
-              }
+              if (!onBeforeDownloadFileMessage) return;
+
               try {
                 const allowDownload = await onBeforeDownloadFileMessage({ message, index: currentFileViewerIndex });
                 if (!allowDownload) {
@@ -90,7 +89,7 @@ export default function MultipleFilesMessageItemBody({
                 key={`sendbird-multiple-files-image-renderer-${index}-${fileInfo.url}`}
               >
                 <ImageRenderer
-                  url={fileInfo.thumbnails?.[0]?.url ?? fileInfo.url}
+                  url={fileInfo.thumbnails?.[0]?.url ?? fileInfo.url ?? ''}
                   fixedSize={false}
                   width={MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey]}
                   maxSideLength={MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB}
@@ -103,7 +102,7 @@ export default function MultipleFilesMessageItemBody({
                   shadeOnHover={true}
                   isUploaded={!!fileInfo.isUploaded}
                   placeHolder={({ style }) => {
-                    if (isGif(fileInfo.mimeType)) return <ImagePlaceholder.GIF style={style} />;
+                    if (fileInfo.mimeType && isGif(fileInfo.mimeType)) return <ImagePlaceholder.GIF style={style} />;
                     return <ImagePlaceholder.Default style={style} />;
                   }}
                   defaultComponent={<ImagePlaceholder.LoadError />}
@@ -113,7 +112,7 @@ export default function MultipleFilesMessageItemBody({
           })}
         </ImageGrid>
       </>
-    )
+    ) : <></>
   );
 }
 
diff --git a/src/ui/OGMessageItemBody/index.tsx b/src/ui/OGMessageItemBody/index.tsx
index 6866c1978..5d825a9d9 100644
--- a/src/ui/OGMessageItemBody/index.tsx
+++ b/src/ui/OGMessageItemBody/index.tsx
@@ -36,11 +36,11 @@ export default function OGMessageItemBody({
 }: Props): ReactElement {
   const { stringSet } = useContext(LocalizationContext);
 
-  const isMessageMentioned = isMentionEnabled && message?.mentionedMessageTemplate?.length > 0 && message?.mentionedUsers?.length > 0;
+  const isMessageMentioned = isMentionEnabled && message?.mentionedMessageTemplate?.length > 0 && message?.mentionedUsers && message?.mentionedUsers?.length > 0;
   const tokens = useMemo(() => {
     if (isMessageMentioned) {
       return tokenizeMessage({
-        mentionedUsers: message?.mentionedUsers,
+        mentionedUsers: message?.mentionedUsers ?? undefined,
         messageText: message?.mentionedMessageTemplate,
       });
     }
@@ -54,7 +54,7 @@ export default function OGMessageItemBody({
   return (
     <div
       className={getClassName([
-        className,
+        className ?? '',
         'sendbird-og-message-item-body',
         isByMe ? 'outgoing' : 'incoming',
         mouseHover ? 'mouse-hover' : '',
@@ -105,7 +105,7 @@ const OGImageSection = (props: { onClick: () => void; ogImage: OGImage; onMessag
       <ImageRenderer
         className="sendbird-og-message-item-body__og-thumbnail__image"
         url={ogImage.url || ''}
-        alt={ogImage.alt}
+        alt={ogImage.alt || ''}
         width="100%"
         height={isMobile ? '136px' : '240px'}
         onLoad={onMessageHeightChange}
diff --git a/src/ui/OpenChannelMobileMenu/index.tsx b/src/ui/OpenChannelMobileMenu/index.tsx
index 3edfdd082..0b006ff92 100644
--- a/src/ui/OpenChannelMobileMenu/index.tsx
+++ b/src/ui/OpenChannelMobileMenu/index.tsx
@@ -56,7 +56,7 @@ const OpenChannelMobileMenu: React.FC<Props> = (props: Props) => {
               <MenuItem
                 className="sendbird-openchannel-og-message__top__context-menu__copy"
                 onClick={() => {
-                  copyToClipboard();
+                  copyToClipboard?.();
                 }}
                 dataSbId="open_channel_mobile_context_menu_copy"
               >
@@ -69,7 +69,7 @@ const OpenChannelMobileMenu: React.FC<Props> = (props: Props) => {
               <MenuItem
                 className="sendbird-openchannel-og-message__top__context-menu__edit"
                 onClick={() => {
-                  showEdit();
+                  showEdit?.();
                 }}
                 dataSbId="open_channel_mobile_context_menu_edit"
               >
@@ -81,7 +81,7 @@ const OpenChannelMobileMenu: React.FC<Props> = (props: Props) => {
             isFineResend({ message, userId, status }) && (
               <MenuItem
                 onClick={() => {
-                  resendMessage();
+                  resendMessage?.();
                 }}
                 dataSbId="open_channel_mobile_context_menu_resend"
               >
@@ -93,7 +93,7 @@ const OpenChannelMobileMenu: React.FC<Props> = (props: Props) => {
             (!isEphemeral && isFineDelete({ message, userId, status })) && (
               <MenuItem
                 onClick={() => {
-                  showRemove();
+                  showRemove?.();
                 }}
                 dataSbId="open_channel_mobile_context_menu_delete"
               >
diff --git a/src/ui/OpenchannelOGMessage/index.tsx b/src/ui/OpenchannelOGMessage/index.tsx
index 3aa0962ba..bd0ec3bec 100644
--- a/src/ui/OpenchannelOGMessage/index.tsx
+++ b/src/ui/OpenchannelOGMessage/index.tsx
@@ -79,10 +79,10 @@ export default function OpenChannelOGMessage({
     delay: 300,
   });
 
-  const messageComponentRef = useRef(null);
-  const contextMenuRef = useRef(null);
-  const mobileMenuRef = useRef(null);
-  const avatarRef = useRef(null);
+  const messageComponentRef = useRef<HTMLDivElement>();
+  const contextMenuRef = useRef<HTMLDivElement>();
+  const mobileMenuRef = useRef<HTMLDivElement>();
+  const avatarRef = useRef<HTMLDivElement>();
 
   const isPending = checkIsPending(status);
   const isFailed = checkIsFailed(status);
@@ -96,7 +96,7 @@ export default function OpenChannelOGMessage({
 
   // place conxt menu top depending clientHeight of message component
   useEffect(() => {
-    if (messageComponentRef?.current?.clientHeight > 36) {
+    if (messageComponentRef?.current?.clientHeight && messageComponentRef?.current?.clientHeight > 36) {
       setContextStyle({ top: '8px ' });
     } else {
       setContextStyle({ top: '2px' });
@@ -328,7 +328,7 @@ export default function OpenChannelOGMessage({
         <div className="sendbird-openchannel-og-message__bottom">
           <div className="sendbird-openchannel-og-message__bottom__og-tag" ref={mobileMenuRef}>
             {
-              ogMetaData.url && (
+              ogMetaData?.url && (
                 <Label
                   className="sendbird-openchannel-og-message__bottom__og-tag__url"
                   type={LabelTypography.CAPTION_3}
@@ -339,10 +339,10 @@ export default function OpenChannelOGMessage({
               )
             }
             {
-              ogMetaData.title && (
+              ogMetaData?.title && (
                 <LinkLabel
                   className="sendbird-openchannel-og-message__bottom__og-tag__title"
-                  src={ogMetaData.url}
+                  src={ogMetaData.url ?? ''}
                   type={LabelTypography.SUBTITLE_2}
                   color={LabelColors.PRIMARY}
                 >
@@ -353,7 +353,7 @@ export default function OpenChannelOGMessage({
               )
             }
             {
-              ogMetaData.description && (
+              ogMetaData?.description && (
                 <Label
                   className="sendbird-openchannel-og-message__bottom__og-tag__description"
                   type={LabelTypography.BODY_2}
@@ -364,7 +364,7 @@ export default function OpenChannelOGMessage({
               )
             }
             {
-              ogMetaData.url && (
+              ogMetaData?.url && (
                 <div
                   className="sendbird-openchannel-og-message__bottom__og-tag__thumbnail"
                   role="button"
diff --git a/src/ui/OpenchannelThumbnailMessage/index.tsx b/src/ui/OpenchannelThumbnailMessage/index.tsx
index 5c4aaa817..412541aae 100644
--- a/src/ui/OpenchannelThumbnailMessage/index.tsx
+++ b/src/ui/OpenchannelThumbnailMessage/index.tsx
@@ -260,7 +260,7 @@ export default function OpenchannelThumbnailMessage({
                       ? (
                         <ImageRenderer
                           className="sendbird-openchannel-thumbnail-message__right__body__wrap__image"
-                          url={thumbnailUrl || url || localUrl}
+                          url={thumbnailUrl || url || localUrl || ''}
                           alt="image"
                           width={messageWidth}
                           height="270px"
diff --git a/src/ui/OpenchannelUserMessage/index.tsx b/src/ui/OpenchannelUserMessage/index.tsx
index c003b8cad..1f9165695 100644
--- a/src/ui/OpenchannelUserMessage/index.tsx
+++ b/src/ui/OpenchannelUserMessage/index.tsx
@@ -65,10 +65,10 @@ export default function OpenchannelUserMessage({
   // hooks
   const { stringSet, dateLocale } = useLocalization();
   const { disableUserProfile, renderUserProfile } = useContext(UserProfileContext);
-  const messageRef = useRef(null);
-  const avatarRef = useRef(null);
-  const contextMenuRef = useRef(null);
-  const mobileMenuRef = useRef(null);
+  const messageRef = useRef<HTMLDivElement>();
+  const avatarRef = useRef<HTMLDivElement>();
+  const contextMenuRef = useRef<HTMLDivElement>();
+  const mobileMenuRef = useRef<HTMLDivElement>();
   const [contextStyle, setContextStyle] = useState({});
   const [contextMenu, setContextMenu] = useState(false);
 
@@ -80,7 +80,7 @@ export default function OpenchannelUserMessage({
 
   // place context menu top depending clientHeight of message component
   useEffect(() => {
-    if (messageRef?.current?.clientHeight > 36) {
+    if (messageRef?.current?.clientHeight && messageRef.current.clientHeight > 36) {
       setContextStyle({ top: '8px ' });
     } else {
       setContextStyle({ top: '2px' });
diff --git a/src/ui/PlaceHolder/index.tsx b/src/ui/PlaceHolder/index.tsx
index 7f8fddf4b..06c6095e8 100644
--- a/src/ui/PlaceHolder/index.tsx
+++ b/src/ui/PlaceHolder/index.tsx
@@ -30,7 +30,7 @@ export default function PlaceHolder({
   type,
   iconSize,
   searchInString = '',
-  retryToConnect = null,
+  retryToConnect,
 }: PlaceHolderProps): ReactElement {
   const { stringSet } = useContext(LocalizationContext);
   return (
diff --git a/src/ui/QuoteMessage/index.tsx b/src/ui/QuoteMessage/index.tsx
index f71cd6fff..cdf7b1b32 100644
--- a/src/ui/QuoteMessage/index.tsx
+++ b/src/ui/QuoteMessage/index.tsx
@@ -1,6 +1,6 @@
 import './index.scss';
 import React, { ReactElement, useContext, useState } from 'react';
-import type { FileMessage, UserMessage } from '@sendbird/chat/message';
+import type { BaseMessage, FileMessage, UserMessage } from '@sendbird/chat/message';
 
 import Icon, { IconTypes, IconColors } from '../Icon';
 import Label, { LabelTypography, LabelColors } from '../Label';
@@ -43,7 +43,7 @@ export default function QuoteMessage({
 }: Props): ReactElement {
   const { stringSet } = useContext(LocalizationContext);
 
-  const { parentMessage } = message;
+  const { parentMessage } = message as BaseMessage;
   const parentMessageSender = (parentMessage as SendableMessageType)?.sender;
   const parentMessageSenderNickname = (userId === parentMessageSender?.userId) ? stringSet.QUOTED_MESSAGE__CURRENT_USER : parentMessageSender?.nickname;
   const parentMessageUrl = getMessageFirstFileUrl(parentMessage as CoreMessageType);
diff --git a/src/ui/QuoteMessageInput/QuoteMessageThumbnail.tsx b/src/ui/QuoteMessageInput/QuoteMessageThumbnail.tsx
index 6973d51a3..c4a27626d 100644
--- a/src/ui/QuoteMessageInput/QuoteMessageThumbnail.tsx
+++ b/src/ui/QuoteMessageInput/QuoteMessageThumbnail.tsx
@@ -23,8 +23,8 @@ interface Props {
 const componentClassname = 'sendbird-quote_message_input__avatar';
 
 export default function QuoteMessageThumbnail({ message }: Props): ReactElement {
-  if (!isFileMessage(message) && !isMultipleFilesMessage(message) || isVoiceMessage(message)) {
-    return null;
+  if (!isFileMessage(message) && !isMultipleFilesMessage(message) || isVoiceMessage(message as FileMessage)) {
+    return <></>;
   }
   let thumbnailUrl = getMessageFirstFileThumbnailUrl(message);
   if (!thumbnailUrl) {
diff --git a/src/ui/QuoteMessageInput/index.tsx b/src/ui/QuoteMessageInput/index.tsx
index 956013985..f6fb855fa 100644
--- a/src/ui/QuoteMessageInput/index.tsx
+++ b/src/ui/QuoteMessageInput/index.tsx
@@ -42,7 +42,7 @@ export default function QuoteMessageInput({
     && !isVoiceMessage(replyingMessage as FileMessage);
 
   return (
-    <div className={getClassName(['sendbird-quote_message_input', className])}>
+    <div className={getClassName(['sendbird-quote_message_input', className ?? ''])}>
       {
         displayFileIcon && (
           <QuoteMessageThumbnail message={fileMessage} />
@@ -84,7 +84,7 @@ export default function QuoteMessageInput({
         fillColor={IconColors.ON_BACKGROUND_2}
         width="24px"
         height="24px"
-        onClick={() => onClose(replyingMessage)}
+        onClick={() => onClose?.(replyingMessage)}
       />
     </div>
   );
diff --git a/src/ui/ReactionBadge/index.tsx b/src/ui/ReactionBadge/index.tsx
index ec7fc217b..c277a6e65 100644
--- a/src/ui/ReactionBadge/index.tsx
+++ b/src/ui/ReactionBadge/index.tsx
@@ -58,7 +58,7 @@ const ReactionBadge = React.forwardRef((props: ReactionBadgeProps, ref: RefObjec
           {children}
         </div>
         <Label
-          className={(children && count) && 'sendbird-reaction-badge__inner__count'}
+          className={(children && count) ? 'sendbird-reaction-badge__inner__count' : ''}
           type={LabelTypography.CAPTION_3}
           color={LabelColors.ONBACKGROUND_1}
         >
diff --git a/src/ui/SortByRow/index.tsx b/src/ui/SortByRow/index.tsx
index fa339893f..13b5b93ab 100644
--- a/src/ui/SortByRow/index.tsx
+++ b/src/ui/SortByRow/index.tsx
@@ -20,7 +20,7 @@ export default function SortByRow({
   children,
 }: SortByRowProps): ReactElement {
   if (Array.isArray(children) && children.length > maxItemCount) {
-    const result = [];
+    const result: ReactElement[] = [];
 
     for (let i = 0; i < children.length; i += maxItemCount) {
       result.push(
diff --git a/src/ui/TemplateMessageItemBody/FallbackTemplateMessageItemBody.tsx b/src/ui/TemplateMessageItemBody/FallbackTemplateMessageItemBody.tsx
index e940f1528..9d8765192 100644
--- a/src/ui/TemplateMessageItemBody/FallbackTemplateMessageItemBody.tsx
+++ b/src/ui/TemplateMessageItemBody/FallbackTemplateMessageItemBody.tsx
@@ -20,7 +20,7 @@ export function FallbackTemplateMessageItemBody({
   return (
     <div
       className={getClassName([
-        className,
+        className ?? '',
         isByMe ? 'outgoing' : 'incoming',
         'sendbird-template-message-item-body__fallback_message',
       ])}
diff --git a/src/ui/TemplateMessageItemBody/LoadingTemplateMessageItemBody.tsx b/src/ui/TemplateMessageItemBody/LoadingTemplateMessageItemBody.tsx
index 6238bdfd7..5c8fe1529 100644
--- a/src/ui/TemplateMessageItemBody/LoadingTemplateMessageItemBody.tsx
+++ b/src/ui/TemplateMessageItemBody/LoadingTemplateMessageItemBody.tsx
@@ -16,7 +16,7 @@ export function LoadingTemplateMessageItemBody({
   return (
     <div
       className={getClassName([
-        className,
+        className ?? '',
         isByMe ? 'outgoing' : 'incoming',
         'sendbird-template-loading-message-item-body',
       ])}
diff --git a/src/ui/TemplateMessageItemBody/index.tsx b/src/ui/TemplateMessageItemBody/index.tsx
index dc098f895..0f3fdd62a 100644
--- a/src/ui/TemplateMessageItemBody/index.tsx
+++ b/src/ui/TemplateMessageItemBody/index.tsx
@@ -129,9 +129,11 @@ export function TemplateMessageItemBody({
         throw new Error('TemplateMessageItemBody | simple template keys are not found in view_variables.');
       }
       const simpleCachedTemplate = getCachedTemplate(simpleTemplateKey);
-      cachedSimpleTemplates.push(simpleCachedTemplate);
-      simpleTemplatesVariables.push(simpleTemplateData.variables);
-      maxVersion = Math.max(maxVersion, simpleCachedTemplate.version);
+      if (simpleCachedTemplate) {
+        cachedSimpleTemplates.push(simpleCachedTemplate);
+        simpleTemplatesVariables.push(simpleTemplateData.variables);
+        maxVersion = Math.max(maxVersion, simpleCachedTemplate.version);
+      }
     });
     const filledMessageTemplateItemsList: MessageTemplateItem[][] = cachedSimpleTemplates
       .map((cachedSimpleTemplate, index) => {
@@ -193,7 +195,7 @@ export function TemplateMessageItemBody({
     if (!cachedTemplate) {
       nonCachedTemplateKeys.push(templateKey);
     }
-    if (templateData.view_variables) {
+    if (templateData?.view_variables) {
       try {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         Object.entries(templateData.view_variables).forEach(([_, simpleTemplateDataList]) => {
@@ -217,7 +219,7 @@ export function TemplateMessageItemBody({
     try {
       if (nonCachedTemplateKeys.length > 0) {
         tryFetchTemplateByKey(nonCachedTemplateKeys);
-      } else {
+      } else if (cachedTemplate) {
         const parsedUiTemplate: MessageTemplateItem[] = JSON.parse(cachedTemplate.uiTemplate);
         if (!Array.isArray(parsedUiTemplate) || parsedUiTemplate.length === 0) {
           logger.error('TemplateMessageItemBody | parsed template is missing ui_template: ', parsedUiTemplate);
@@ -237,7 +239,7 @@ export function TemplateMessageItemBody({
               logger.error('TemplateMessageItemBody | composite template with reservation key must follow the following string format "{@your-reservation-key}": ', templateKey, carouselItem);
               throw new Error('TemplateMessageItemBody | composite template with reservation key must follow the following string format "{@your-reservation-key}". See error log in console for details');
             }
-            if (!templateData.view_variables) {
+            if (!templateData?.view_variables) {
               logger.error('TemplateMessageItemBody | template key suggests composite template but template data is missing view_variables: ', templateKey, templateData);
               throw new Error('TemplateMessageItemBody | template key suggests composite template but template data is missing view_variables. See error log in console for details');
             }
@@ -363,7 +365,7 @@ export function TemplateMessageItemBody({
       >
         <MessageTemplateWrapper
           message={message}
-          templateVersion={renderData.templateVersion}
+          templateVersion={renderData.templateVersion ?? 0}
           templateItems={
             renderData.filledMessageTemplateItemsList as MessageTemplateItem[]
           }
diff --git a/src/ui/TemplateMessageItemBody/utils/restoreNumbersFromMessageTemplateObject.tsx b/src/ui/TemplateMessageItemBody/utils/restoreNumbersFromMessageTemplateObject.tsx
index 150967957..68ff02d59 100644
--- a/src/ui/TemplateMessageItemBody/utils/restoreNumbersFromMessageTemplateObject.tsx
+++ b/src/ui/TemplateMessageItemBody/utils/restoreNumbersFromMessageTemplateObject.tsx
@@ -16,7 +16,7 @@ export default function restoreNumbersFromMessageTemplateObject(value: unknown,
   if (Array.isArray(value)) {
     return value.map((item) => restoreNumbersFromMessageTemplateObject(item));
   }
-  if (typeof value === 'object') {
+  if (value && typeof value === 'object') {
     return Object.keys(value).reduce((acc, key) => {
       acc[key] = restoreNumbersFromMessageTemplateObject(value[key], key);
       return acc;
diff --git a/src/ui/TextMessageItemBody/index.tsx b/src/ui/TextMessageItemBody/index.tsx
index 274d8b20e..4a7160c21 100644
--- a/src/ui/TextMessageItemBody/index.tsx
+++ b/src/ui/TextMessageItemBody/index.tsx
@@ -28,12 +28,14 @@ export default function TextMessageItemBody({
 }: Props): ReactElement {
   const { stringSet } = useContext(LocalizationContext);
   const isMessageMentioned = isMentionEnabled
-    && message?.mentionedMessageTemplate?.length > 0
-    && message?.mentionedUsers?.length > 0;
+    && message?.mentionedMessageTemplate
+    && message.mentionedMessageTemplate.length > 0
+    && message?.mentionedUsers
+    && message.mentionedUsers.length > 0;
   const tokens = useMemo(() => {
     if (isMessageMentioned) {
       return tokenizeMessage({
-        mentionedUsers: message?.mentionedUsers,
+        mentionedUsers: message?.mentionedUsers ?? undefined,
         messageText: message?.mentionedMessageTemplate,
       });
     }
diff --git a/src/ui/ThreadReplies/index.tsx b/src/ui/ThreadReplies/index.tsx
index 1d493f318..8e7ad41bb 100644
--- a/src/ui/ThreadReplies/index.tsx
+++ b/src/ui/ThreadReplies/index.tsx
@@ -19,7 +19,7 @@ export function ThreadReplies(
     threadInfo,
     onClick,
   }: ThreadRepliesProps,
-  ref?: RefObject<HTMLDivElement>,
+  ref: RefObject<HTMLDivElement>,
 ): React.ReactElement {
   const {
     mostRepliedUsers = [],
@@ -31,11 +31,11 @@ export function ThreadReplies(
       className={`sendbird-ui-thread-replies ${className}`}
       role="button"
       onClick={(e) => {
-        onClick(e);
+        onClick?.(e);
         e?.stopPropagation();
       }}
       onKeyDown={(e) => {
-        onClick(e);
+        onClick?.(e);
         e?.stopPropagation();
       }}
       ref={ref}
diff --git a/src/ui/Toggle/ToggleUI.tsx b/src/ui/Toggle/ToggleUI.tsx
index 4afe45b26..be7422ea9 100644
--- a/src/ui/Toggle/ToggleUI.tsx
+++ b/src/ui/Toggle/ToggleUI.tsx
@@ -75,10 +75,10 @@ export function ToggleUI(props: ToggleUIProps): React.ReactElement {
         aria-labelledby={ariaLabelledby}
         name={name}
         id={id}
-        checked={checked}
+        checked={checked ?? undefined}
         disabled={disabled}
         onChange={(e) => {
-          onChange(e);
+          onChange?.(e);
           setAnimatedClassName(e.currentTarget.checked ? 'sendbird-input-toggle-button--turned-on' : 'sendbird-input-toggle-button--turned-off');
         }}
         onFocus={onFocus}
diff --git a/src/ui/TooltipWrapper/index.tsx b/src/ui/TooltipWrapper/index.tsx
index 332b320c1..6f473ad86 100644
--- a/src/ui/TooltipWrapper/index.tsx
+++ b/src/ui/TooltipWrapper/index.tsx
@@ -16,7 +16,7 @@ export default function TooltipWrapper({
   // clickTooltip can be added later
 }: TooltipWrapperProps): ReactElement {
   const [showHoverTooltip, setShowHoverTooltip] = useState(false);
-  const childrenRef = useRef(null);
+  const childrenRef = useRef<HTMLDivElement>();
 
   return (
     <div
@@ -44,7 +44,7 @@ export default function TooltipWrapper({
             <div className="sendbird-tooltip-wrapper__hover-tooltip__inner">
               <div
                 className="sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container"
-                style={{ left: childrenRef.current && `calc(${childrenRef.current.offsetWidth / 2}px - 50%)` }}
+                style={{ left: childrenRef.current ? `calc(${childrenRef.current.offsetWidth / 2}px - 50%)` : undefined }}
               >
                 {hoverTooltip}
               </div>
diff --git a/src/ui/UnknownMessageItemBody/index.tsx b/src/ui/UnknownMessageItemBody/index.tsx
index e42211fc2..dd2979260 100644
--- a/src/ui/UnknownMessageItemBody/index.tsx
+++ b/src/ui/UnknownMessageItemBody/index.tsx
@@ -24,7 +24,7 @@ export default function UnknownMessageItemBody({
   const { stringSet } = useContext(LocalizationContext);
   return (
     <div className={getClassName([
-      className,
+      className ?? '',
       'sendbird-unknown-message-item-body',
       isByMe ? 'outgoing' : 'incoming',
       mouseHover ? 'mouse-hover' : '',
diff --git a/src/ui/UserListItem/index.tsx b/src/ui/UserListItem/index.tsx
index 2e8d81e03..6d2725f79 100644
--- a/src/ui/UserListItem/index.tsx
+++ b/src/ui/UserListItem/index.tsx
@@ -87,7 +87,7 @@ export default function UserListItem({
           renderUserProfile
             ? renderUserProfile({
               user,
-              currentUserId: currentUser,
+              currentUserId: currentUser ?? '',
               close: closeDropdown,
               avatarRef,
             })
@@ -142,7 +142,7 @@ export default function UserListItem({
               id={uniqueKey}
               checked={checked}
               disabled={disabled}
-              onChange={(event) => onChange(event)}
+              onChange={(event) => onChange?.(event)}
             />
           </label>
         )
diff --git a/src/ui/UserProfile/index.tsx b/src/ui/UserProfile/index.tsx
index 8c2784dcc..a1484dc1a 100644
--- a/src/ui/UserProfile/index.tsx
+++ b/src/ui/UserProfile/index.tsx
@@ -16,7 +16,7 @@ interface Logger {
 }
 
 interface Props {
-  user: User;
+  user?: User | null;
   currentUserId?: string;
   logger?: Logger;
   disableMessaging?: boolean;
@@ -62,10 +62,10 @@ function UserProfile({
                 // Create 1:1 channel
                 const params: GroupChannelCreateParams = {
                   isDistinct: false,
-                  invitedUserIds: [user?.userId],
+                  invitedUserIds: user?.userId ? [user?.userId] : [],
                   operatorUserIds: [currentUserId_],
                 };
-                onSuccess();
+                onSuccess?.();
                 createChannel(params)
                   .then((groupChannel) => {
                     logger.info('UserProfile, channel create', groupChannel);
diff --git a/src/ui/VoiceMessageInput/controlerIcons.tsx b/src/ui/VoiceMessageInput/controlerIcons.tsx
index 35deb6760..b949241f0 100644
--- a/src/ui/VoiceMessageInput/controlerIcons.tsx
+++ b/src/ui/VoiceMessageInput/controlerIcons.tsx
@@ -41,7 +41,7 @@ export const ControlerIcon = ({
       );
     }
     default:
-      return null;
+      return <></>;
   }
 };
 
diff --git a/src/ui/VoiceMessageInput/index.tsx b/src/ui/VoiceMessageInput/index.tsx
index bc24524c8..6debeb9ec 100644
--- a/src/ui/VoiceMessageInput/index.tsx
+++ b/src/ui/VoiceMessageInput/index.tsx
@@ -58,14 +58,14 @@ export const VoiceMessageInput = ({
   const handleOnCancelClick = () => {
     const currentTime = Date.now();
     if (currentTime - lastClickTime > VOICE_RECORDER_CLICK_BUFFER_TIME) {
-      onCancelClick();
+      onCancelClick?.();
       setLastClickTime(currentTime);
     }
   };
   const handleOnControlClick = useCallback(() => {
     const currentTime = Date.now();
     if (currentTime - lastClickTime > VOICE_RECORDER_CLICK_BUFFER_TIME) {
-      onControlClick(currentType);
+      onControlClick?.(currentType);
       setLastClickTime(currentTime);
     }
   }, [currentType]);
@@ -73,7 +73,7 @@ export const VoiceMessageInput = ({
     const currentTime = Date.now();
     if (currentTime - lastClickTime > VOICE_RECORDER_CLICK_BUFFER_TIME) {
       if (!isSendButtonDisabled) {
-        onSubmitClick();
+        onSubmitClick?.();
       }
       setLastClickTime(currentTime);
     }
diff --git a/src/ui/VoiceMessageItemBody/index.tsx b/src/ui/VoiceMessageItemBody/index.tsx
index 85c09bb97..93f12bf84 100644
--- a/src/ui/VoiceMessageItemBody/index.tsx
+++ b/src/ui/VoiceMessageItemBody/index.tsx
@@ -49,19 +49,20 @@ export const VoiceMessageItemBody = ({
       setUsingReaction(false);
     }
   }, [isReactionEnabled, message?.reactions?.length]);
-  const progresBarMaxSize = useMemo(() => {
+  const progressBarMaxSize = useMemo(() => {
+    const DEFAULT_MAX_SIZE = 1;
     if (message?.metaArrays) {
       const duration = message?.metaArrays.find((metaArray) => metaArray.key === 'KEY_VOICE_MESSAGE_DURATION')?.value[0];
-      return duration && parseInt(duration);
+      return duration ? parseInt(duration) : DEFAULT_MAX_SIZE;
     }
-    return 1;
+    return DEFAULT_MAX_SIZE;
   }, [message?.metaArrays]);
 
   return (
     <div className={`sendbird-voice-message-item-body ${className} ${usingReaction ? 'is-reactions-contained' : ''}`}>
       <ProgressBar
         className="sendbird-voice-message-item-body__progress-bar"
-        maxSize={duration || progresBarMaxSize}
+        maxSize={duration || progressBarMaxSize}
         currentSize={playbackTime}
         colorType={isByMe ? ProgressBarColorTypes.PRIMARY : ProgressBarColorTypes.GRAY}
       />
@@ -103,7 +104,7 @@ export const VoiceMessageItemBody = ({
       </div>
       <PlaybackTime
         className="sendbird-voice-message-item-body__playback-time"
-        time={progresBarMaxSize - playbackTime}
+        time={progressBarMaxSize - playbackTime}
         labelType={LabelTypography.BODY_1}
         labelColor={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}
       />
diff --git a/src/ui/Word/index.tsx b/src/ui/Word/index.tsx
index 9ea7ea843..697c16b99 100644
--- a/src/ui/Word/index.tsx
+++ b/src/ui/Word/index.tsx
@@ -20,7 +20,7 @@ interface WordProps {
 }
 
 // Word and StringObj will include types: normal, mention, url
-export default function Word(props: WordProps): JSX.Element {
+export default function Word(props: WordProps): JSX.Element | null {
   const {
     word,
     message,
@@ -34,7 +34,7 @@ export default function Word(props: WordProps): JSX.Element {
   return (
     <span className="sendbird-word">
       {
-        convertWordToStringObj(word, message?.mentionedUsers).map((stringObj, index) => {
+        message?.mentionedUsers && convertWordToStringObj(word, message.mentionedUsers).map((stringObj, index) => {
           const type = stringObj?.type || '';
           const value = stringObj?.value || '';
           const userId = stringObj?.userId || '';
diff --git a/src/utils/__tests__/getIsReactionEnabled.spec.ts b/src/utils/__tests__/getIsReactionEnabled.spec.ts
index 241e6f459..f507ee7dc 100644
--- a/src/utils/__tests__/getIsReactionEnabled.spec.ts
+++ b/src/utils/__tests__/getIsReactionEnabled.spec.ts
@@ -3,13 +3,13 @@ import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { SendBirdStateConfig } from '../../lib/types';
 import { getIsReactionEnabled } from '../getIsReactionEnabled';
 
-const normalGroupChannel = (props?) => ({
+const normalGroupChannel = (props?: any) => ({
   isBroadcast: false,
   isEphemeral: false,
   isSuper: false,
   ...props,
 } as GroupChannel);
-const normalConfigs = (props?, groupChannelProps?) => ({
+const normalConfigs = (props?: any, groupChannelProps?: any) => ({
   groupChannel: {
     enableReactions: true,
     enableReactionsSupergroup: false,
@@ -32,20 +32,17 @@ describe('Global-utils/getIsReactionEnabled', () => {
       config: normalConfigs(),
       moduleLevel: moduleLevel2,
     })).toBe(moduleLevel2);
-  });
 
-  it('should prioritize the isSuper than moduleLevel', () => {
-    const isSuper = true;
     expect(getIsReactionEnabled({
-      channel: normalGroupChannel({ isSuper }),
+      channel: normalGroupChannel({ isSuper: true }),
       config: normalConfigs(),
-      moduleLevel: true,
-    })).toBe(false);
+      moduleLevel: moduleLevel,
+    })).toBe(moduleLevel);
     expect(getIsReactionEnabled({
-      channel: normalGroupChannel({ isSuper }),
+      channel: normalGroupChannel({ isSuper: true }),
       config: normalConfigs(),
-      moduleLevel: false,
-    })).toBe(false);
+      moduleLevel: moduleLevel2,
+    })).toBe(moduleLevel2);
   });
 
   it('should prioritize moduleLevel than enableReactionsSupergroup', () => {
diff --git a/src/utils/__tests__/utils.spec.ts b/src/utils/__tests__/utils.spec.ts
index 896680026..1d31e667c 100644
--- a/src/utils/__tests__/utils.spec.ts
+++ b/src/utils/__tests__/utils.spec.ts
@@ -68,7 +68,7 @@ describe('Global-utils: verify message type util functions', () => {
     expect(isAdminMessage({ isAdminMessage: () => true } as AdminMessage)).toBe(true);
     expect(isAdminMessage({ messageType: 'admin' } as AdminMessage)).toBe(true);
     expect(isMultipleFilesMessage({ isMultipleFilesMessage: () => true } as MultipleFilesMessage)).toBe(true);
-    expect(isMultipleFilesMessage({ messageType: 'file', fileInfoList: [] } as MultipleFilesMessage)).toBe(true);
+    expect(isMultipleFilesMessage({ messageType: 'file', fileInfoList: [] } as unknown as MultipleFilesMessage)).toBe(true);
   });
 
   it('should refer to the method first rather than messageType', () => {
diff --git a/src/utils/color.ts b/src/utils/color.ts
index a7253f65c..5da18ee2d 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -20,6 +20,6 @@ export const changeColorToClassName = (color: Colors): string => {
     case Colors.ONCONTENT_1: return 'sendbird-color--oncontent-1';
     case Colors.PRIMARY: return 'sendbird-color--primary';
     case Colors.ERROR: return 'sendbird-color--error';
-    default: return null;
+    default: return '';
   }
 };
diff --git a/src/utils/compressImages.ts b/src/utils/compressImages.ts
index 79a0f199d..ff74fa05e 100644
--- a/src/utils/compressImages.ts
+++ b/src/utils/compressImages.ts
@@ -86,8 +86,8 @@ export const compressImages = async ({
   imageCompression,
 }: CompressImagesParams) => {
   const { compressionRate, outputFormat = 'preserve' } = imageCompression;
-  const resizingWidth = pxToNumber(imageCompression.resizingWidth);
-  const resizingHeight = pxToNumber(imageCompression.resizingHeight);
+  const resizingWidth = imageCompression.resizingWidth ? pxToNumber(imageCompression.resizingWidth) : undefined;
+  const resizingHeight = imageCompression.resizingHeight ? pxToNumber(imageCompression.resizingHeight) : undefined;
 
   const result = {
     failedIndexes: [] as number[],
@@ -98,7 +98,7 @@ export const compressImages = async ({
     logger?.warning('utils - compressImages: There are no files.', files);
     return result;
   }
-  if (compressionRate < 0 || 1 < compressionRate) {
+  if (!compressionRate || compressionRate < 0 || 1 < compressionRate) {
     logger?.warning('utils - compressImages: The compressionRate is not acceptable.', compressionRate);
     return result;
   }
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
index 65de3f29c..c912e46d4 100644
--- a/src/utils/consts.ts
+++ b/src/utils/consts.ts
@@ -39,6 +39,7 @@ export const SLIDER_BUTTON_ICON_SIDE_LENGTH = '32px';
 
 // multiple files message file info count limit
 export const DEFAULT_MULTIPLE_FILES_MESSAGE_LIMIT = 10;
+export const DEFAULT_UPLOAD_SIZE_LIMIT = 25 * 1024 * 1024;
 
 // Local storage item key for sdk templates token
 export const CACHED_MESSAGE_TEMPLATES_TOKEN_KEY = 'sendbird_message_templates_token_key';
diff --git a/src/utils/exports/getOutgoingMessageState.ts b/src/utils/exports/getOutgoingMessageState.ts
index dc5af86c6..49c31e9ae 100644
--- a/src/utils/exports/getOutgoingMessageState.ts
+++ b/src/utils/exports/getOutgoingMessageState.ts
@@ -14,8 +14,8 @@ export enum OutgoingMessageStates {
 
 export const getOutgoingMessageState = (
   channel: Nullable<GroupChannel | OpenChannel>,
-  message: CoreMessageType,
-): string => {
+  message: CoreMessageType | undefined | null,
+) => {
   if (!message || !('sendingStatus' in message)) return OutgoingMessageStates.NONE;
 
   if (message.sendingStatus === 'pending') {
diff --git a/src/utils/getIsReactionEnabled.ts b/src/utils/getIsReactionEnabled.ts
index 2ac46cdf5..4272ecbb7 100644
--- a/src/utils/getIsReactionEnabled.ts
+++ b/src/utils/getIsReactionEnabled.ts
@@ -7,7 +7,7 @@ import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { SendBirdStateConfig } from '../lib/types';
 
 export interface IsReactionEnabledProps {
-  channel: GroupChannel;
+  channel: GroupChannel | null;
   config: SendBirdStateConfig;
   moduleLevel?: boolean;
 }
@@ -20,6 +20,6 @@ export function getIsReactionEnabled({
   if (!channel || channel.isBroadcast || channel.isEphemeral) {
     return false;
   }
-  if (channel.isSuper) return moduleLevel && config.groupChannel.enableReactionsSupergroup;
+  if (channel.isSuper) return moduleLevel ?? config.groupChannel.enableReactionsSupergroup;
   return moduleLevel ?? config.groupChannel.enableReactions;
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 1f46270a6..3cdfa704e 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -15,6 +15,7 @@ import { OpenChannel, SendbirdOpenChat } from '@sendbird/chat/openChannel';
 import { getOutgoingMessageState, OutgoingMessageStates } from './exports/getOutgoingMessageState';
 import { MessageContentMiddleContainerType, Nullable } from '../types';
 import { match } from 'ts-pattern';
+import { SendableMessage } from '@sendbird/chat/lib/__definition';
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
 export const SUPPORTED_MIMES = {
@@ -247,15 +248,15 @@ export const isUserMessage = (message: CoreMessageType): message is UserMessage
       : message?.messageType === 'user'
   )
 );
-export const isFileMessage = (message: CoreMessageType): message is FileMessage => (
-  message && (
+export const isFileMessage = (message?: CoreMessageType): message is FileMessage => (
+  !!message && (
     message['isFileMessage'] && typeof message.isFileMessage === 'function'
       ? message.isFileMessage()
       : message?.messageType === 'file'
   )
 );
 export const isMultipleFilesMessage = (
-  message: CoreMessageType,
+  message?: CoreMessageType,
 ): message is MultipleFilesMessage => (
   message && (
     message['isMultipleFilesMessage'] && typeof message.isMultipleFilesMessage === 'function'
@@ -304,7 +305,7 @@ export const getMessageContentMiddleClassNameByContainerType = ({
 export const isOGMessage = (message: CoreMessageType): message is UserMessage => {
   if (!message || !isUserMessage(message)) return false;
   return (
-    message.ogMetaData
+    !!message.ogMetaData
       && !!(message.ogMetaData.url || message.ogMetaData.title || message.ogMetaData.description || message.ogMetaData.defaultImage)
   );
 };
@@ -340,7 +341,7 @@ export const isAudioMessage = (message: CoreMessageType): message is FileMessage
 
 export const isImageFileInfo = (fileInfo: UploadedFileInfo): boolean => {
   if (!fileInfo) return false;
-  return (isImage(fileInfo.mimeType) || isGif(fileInfo.mimeType));
+  return !!fileInfo.mimeType && (isImage(fileInfo.mimeType) || isGif(fileInfo.mimeType));
 };
 
 export const isAudioMessageMimeType = (type: string): boolean => (/^audio\//.test(type));
@@ -470,7 +471,7 @@ export const getUseReaction = (store: UIKitStore, channel: GroupChannel | OpenCh
 };
 
 export function getSuggestedReplies(message?: BaseMessage): string[] {
-  if (Array.isArray(message?.extendedMessagePayload?.suggested_replies)) {
+  if (message?.extendedMessagePayload && Array.isArray(message?.extendedMessagePayload?.suggested_replies)) {
     return message.extendedMessagePayload.suggested_replies;
   } else {
     return [];
@@ -849,7 +850,7 @@ export const getChannelsWithUpsertedChannel = (
   } else {
     channels.push(channel);
   }
-  return sortChannelList(channels, order);
+  return sortChannelList(channels, order ?? GroupChannelListOrder.LATEST_LAST_MESSAGE);
 };
 
 export const getMatchedUserIds = (word: string, users: Array<User>, _template?: string): boolean => {
@@ -936,5 +937,5 @@ export const arrayEqual = (array1: Array<unknown>, array2: Array<unknown>): bool
 };
 
 export const isSendableMessage = (message?: BaseMessage | null): message is SendableMessageType => {
-  return Boolean(message) && 'sender' in message;
+  return Boolean(message) && 'sender' in (message as SendableMessage);
 };
diff --git a/src/utils/messages.ts b/src/utils/messages.ts
index 5d85a7ac6..29274dd4c 100644
--- a/src/utils/messages.ts
+++ b/src/utils/messages.ts
@@ -14,7 +14,7 @@ export const compareMessagesForGrouping = (
   prevMessage: CoreMessageType,
   currMessage: CoreMessageType,
   nextMessage: CoreMessageType,
-  currentChannel?: GroupChannel,
+  currentChannel?: GroupChannel | null,
   replyType?: ReplyType,
 ) => {
   if (!currentChannel || (currentChannel as GroupChannel).channelType !== 'group') {
diff --git a/src/utils/numberToPx.ts b/src/utils/numberToPx.ts
index 5d7659760..4fa80fb29 100644
--- a/src/utils/numberToPx.ts
+++ b/src/utils/numberToPx.ts
@@ -1,3 +1,6 @@
-export default (value: string | number): string => {
+export default (value: string | number | null): string | undefined => {
+  if (value === null)
+    return undefined;
+
   return typeof value === 'number' ? `${value}px` : value;
 };