From e115fc7a7327de7ea47e8a29208405fb0cb1c695 Mon Sep 17 00:00:00 2001
From: OnestarLee <onestar.lee@sendbird.com>
Date: Mon, 1 Apr 2024 09:28:35 +0900
Subject: [PATCH 1/6] fix type error

---
 .env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index d46133bc4..97ba36720 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
 // appID for dev mode using storybook
-STORYBOOK_APP_ID=xxxx
+STORYBOOK_APP_ID='A41EC43B-87A9-40CF-92C5-E178DD0477B1'
 
 // for frozen channel testing
 STORYBOOK_FROZEN_APP_ID=

From ce543fa441233945010cf5c58bbdb4be69122501 Mon Sep 17 00:00:00 2001
From: OnestarLee <onestar.lee@sendbird.com>
Date: Wed, 3 Apr 2024 15:11:43 +0900
Subject: [PATCH 2/6] fix type error

---
 .env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index 97ba36720..d46133bc4 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
 // appID for dev mode using storybook
-STORYBOOK_APP_ID='A41EC43B-87A9-40CF-92C5-E178DD0477B1'
+STORYBOOK_APP_ID=xxxx
 
 // for frozen channel testing
 STORYBOOK_FROZEN_APP_ID=

From 51e9759bddf7345a655e983b934ff7d034a9cb78 Mon Sep 17 00:00:00 2001
From: OnestarLee <onestar.lee@sendbird.com>
Date: Fri, 5 Apr 2024 14:26:34 +0900
Subject: [PATCH 3/6] fix type error

---
 src/hooks/VoiceRecorder/index.tsx             |  2 +-
 .../Channel/components/Message/index.tsx      |  6 ++--
 .../hooks/useToggleReactionCallback.ts        |  4 +--
 .../components/ChannelListUI/index.tsx        |  6 ++--
 .../context/ChannelListProvider.tsx           |  2 +-
 .../components/ChannelSettingsUI/index.tsx    |  2 +-
 .../components/EditDetailsModal/index.tsx     | 32 +++++++++--------
 .../components/LeaveChannel/index.tsx         |  6 ++--
 .../ModerationPanel/MutedMemberList.tsx       |  3 +-
 .../ModerationPanel/OperatorList.tsx          |  2 +-
 .../ModerationPanel/OperatorsModal.tsx        |  4 +--
 .../components/UserListItem/index.tsx         |  2 +-
 .../components/CreateChannelUI/index.tsx      |  2 +-
 .../components/SelectChannelType.tsx          |  2 +-
 .../components/CreateOpenChannelUI/index.tsx  | 22 +++++++-----
 .../components/EditUserProfileUI/index.tsx    |  5 +--
 .../components/Message/MessageView.tsx        |  2 +-
 .../GroupChannel/components/Message/index.tsx |  6 ++--
 .../components/MessageList/index.tsx          |  4 +--
 .../SuggestedMentionListView.tsx              |  8 ++---
 .../context/GroupChannelProvider.tsx          | 34 +++++++++++--------
 .../components/GroupChannelListUI/index.tsx   |  4 +--
 .../components/MessageSearchUI/index.tsx      |  4 +--
 .../context/MessageSearchProvider.tsx         |  6 ++--
 .../context/hooks/useGetSearchedMessages.ts   |  6 ++--
 .../context/hooks/useSearchStringEffect.ts    |  6 ++--
 .../components/OpenChannelMessage/index.tsx   |  2 +-
 .../OpenChannel/context/dux/reducers.ts       |  1 +
 .../context/hooks/useSendMessageCallback.ts   |  4 +--
 src/modules/OpenChannel/context/utils.ts      |  2 +-
 src/modules/OpenChannelApp/Streaming.tsx      |  2 +-
 .../components/CommunityChannelList.tsx       | 15 ++++----
 .../OpenChannelApp/components/DummyStream.tsx |  2 +-
 .../components/OpenChannelPreview.tsx         |  2 +-
 .../components/OpenChannelListUI/index.tsx    |  4 +--
 .../context/hooks/useFetchNextCallback.ts     |  4 +--
 .../context/hooks/useSetupOpenChannelList.ts  |  4 ---
 .../components/EditDetailsModal.tsx           | 14 ++++----
 .../components/OperatorUI/BannedUserList.tsx  |  4 +--
 .../OperatorUI/BannedUsersModal.tsx           |  2 +-
 .../OperatorUI/MutedParticipantList.tsx       |  2 +-
 .../OperatorUI/MutedParticipantsModal.tsx     |  2 +-
 .../components/OperatorUI/OperatorList.tsx    |  4 +--
 .../components/OperatorUI/OperatorsModal.tsx  |  2 +-
 .../ParticipantUI/ParticipantsModal.tsx       |  2 +-
 .../context/OpenChannelSettingsProvider.tsx   |  2 +-
 .../ParentMessageInfoItem.tsx                 |  7 ++--
 .../Thread/components/RemoveMessageModal.tsx  |  2 +-
 .../Thread/components/ThreadHeader/index.tsx  |  2 +-
 49 files changed, 142 insertions(+), 127 deletions(-)

diff --git a/src/hooks/VoiceRecorder/index.tsx b/src/hooks/VoiceRecorder/index.tsx
index 5376e4367..4d589dac6 100644
--- a/src/hooks/VoiceRecorder/index.tsx
+++ b/src/hooks/VoiceRecorder/index.tsx
@@ -37,7 +37,7 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
   const { children } = props;
   const { config } = useSendbirdStateContext();
   const { logger, isVoiceMessageEnabled } = 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();
diff --git a/src/modules/Channel/components/Message/index.tsx b/src/modules/Channel/components/Message/index.tsx
index bca51b160..06f91f7f9 100644
--- a/src/modules/Channel/components/Message/index.tsx
+++ b/src/modules/Channel/components/Message/index.tsx
@@ -42,7 +42,7 @@ const Message = (props: MessageProps): React.ReactElement => {
       channel={currentGroupChannel}
       emojiContainer={emojiContainer}
       editInputDisabled={
-        !initialized || isDisabledBecauseFrozen(currentGroupChannel) || isDisabledBecauseMuted(currentGroupChannel) || !config.isOnline
+        !initialized || isDisabledBecauseFrozen(currentGroupChannel ?? undefined) || isDisabledBecauseMuted(currentGroupChannel ?? undefined) || !config.isOnline
       }
       shouldRenderSuggestedReplies={
         config?.groupChannel?.enableSuggestedReplies
@@ -55,8 +55,8 @@ const Message = (props: MessageProps): React.ReactElement => {
         && localMessages?.length === 0
         && getSuggestedReplies(message).length > 0
       }
-      isReactionEnabled={isReactionEnabled}
-      replyType={replyType}
+      isReactionEnabled={isReactionEnabled ?? false}
+      replyType={replyType ?? 'NONE'}
       threadReplySelectType={threadReplySelectType}
       nicknamesMap={nicknamesMap}
       renderUserMentionItem={renderUserMentionItem}
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/ChannelList/components/ChannelListUI/index.tsx b/src/modules/ChannelList/components/ChannelListUI/index.tsx
index 3ea7ed7af..c0ae97d1f 100644
--- a/src/modules/ChannelList/components/ChannelListUI/index.tsx
+++ b/src/modules/ChannelList/components/ChannelListUI/index.tsx
@@ -100,9 +100,9 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
       renderPlaceHolderError={renderPlaceHolderError}
       renderPlaceHolderLoading={renderPlaceHolderLoading}
       renderPlaceHolderEmptyList={renderPlaceHolderEmptyList}
-      onChangeTheme={onThemeChange}
-      allowProfileEdit={allowProfileEdit}
-      onUserProfileUpdated={onProfileEditSuccess}
+      onChangeTheme={onThemeChange ?? (() => {})}
+      allowProfileEdit={allowProfileEdit ?? false}
+      onUserProfileUpdated={onProfileEditSuccess ?? (() => {})}
       channels={allChannels}
       onLoadMore={fetchChannelList}
       initialized={initialized}
diff --git a/src/modules/ChannelList/context/ChannelListProvider.tsx b/src/modules/ChannelList/context/ChannelListProvider.tsx
index 48c1c99cd..9a8016baa 100644
--- a/src/modules/ChannelList/context/ChannelListProvider.tsx
+++ b/src/modules/ChannelList/context/ChannelListProvider.tsx
@@ -108,7 +108,7 @@ export interface ChannelListProviderInterface extends ChannelListProviderProps {
   fetchChannelList: () => void;
 }
 
-const ChannelListContext = React.createContext<ChannelListProviderInterface | null>({
+const ChannelListContext = React.createContext<ChannelListProviderInterface>({
   disableUserProfile: true,
   allowProfileEdit: true,
   onBeforeCreateChannel: null,
diff --git a/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx b/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx
index f8aa7ac26..92eb4b060 100644
--- a/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx
+++ b/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx
@@ -33,7 +33,7 @@ const ChannelSettingsUI: React.FC<ChannelSettingsUIProps> = ({
   const { stringSet } = useContext(LocalizationContext);
 
   const state = useSendbirdStateContext();
-  const { channel, invalidChannel, onCloseClick, loading } = useChannelSettingsContext();
+  const { channel, invalidChannel, onCloseClick, loading } = useChannelSettingsContext() ?? {}
 
   const [showLeaveChannelModal, setShowLeaveChannelModal] = useState(false);
 
diff --git a/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx b/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
index fadc3ab21..53d89ea27 100644
--- a/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
+++ b/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
@@ -29,7 +29,7 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
     onChannelModified,
     onBeforeUpdateChannel,
     setChannelUpdateId,
-  } = useChannelSettingsContext();
+  } = useChannelSettingsContext() ?? {};
   const title = channel?.name;
 
   const state = useSendbirdStateContext();
@@ -37,11 +37,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 +51,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 +66,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());
@@ -81,7 +81,7 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
           }).then((groupChannel) => {
             logger.info('ChannelSettings: Channel information updated', groupChannel);
             onChannelModified?.(groupChannel);
-            setChannelUpdateId(uuidv4());
+            setChannelUpdateId?.(uuidv4());
             onSubmit();
           });
         }
@@ -123,14 +123,16 @@ 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..2b8e57841 100644
--- a/src/modules/ChannelSettings/components/LeaveChannel/index.tsx
+++ b/src/modules/ChannelSettings/components/LeaveChannel/index.tsx
@@ -26,8 +26,8 @@ const LeaveChannel: React.FC<LeaveChannelProps> = (props: LeaveChannelProps) =>
     onSubmit = noop,
     onCancel = noop,
   } = props;
-
-  const { channel, onLeaveChannel } = useChannelSettingsContext();
+  
+  const { channel, onLeaveChannel } = useChannelSettingsContext() ?? {};
   const { stringSet } = useLocalization();
   const state = useSendbirdStateContext();
   const logger = state?.config?.logger;
@@ -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/MutedMemberList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx
index 818078044..9e39e91d9 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/OperatorList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx
index 6c3359b83..8d18a70c1 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx
@@ -73,7 +73,7 @@ export const OperatorList = (): ReactElement => {
             currentUser={userId}
             action={({ actionRef }) => {
               if (operator?.userId === userId) {
-                return null;
+                return <></>;
               }
               return (
                 <ContextMenu
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx
index 92744709c..b6f06738e 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx
@@ -69,7 +69,7 @@ export default function OperatorsModal({ onCancel }: Props): ReactElement {
               user={member}
               key={member.userId}
               action={({ parentRef, actionRef }) => (
-                member?.userId !== currentUserId && (
+                member?.userId !== currentUserId ? (
                   <ContextMenu
                     menuTrigger={(toggleDropdown) => (
                       <IconButton
@@ -109,7 +109,7 @@ export default function OperatorsModal({ onCancel }: Props): ReactElement {
                       </MenuItems>
                     )}
                   />
-                )
+                ) : <></>
               )}
             />
           ))}
diff --git a/src/modules/ChannelSettings/components/UserListItem/index.tsx b/src/modules/ChannelSettings/components/UserListItem/index.tsx
index ff46e6ecb..f7f85e7df 100644
--- a/src/modules/ChannelSettings/components/UserListItem/index.tsx
+++ b/src/modules/ChannelSettings/components/UserListItem/index.tsx
@@ -73,7 +73,7 @@ const UserListItem = ({
           renderUserProfile
             ? renderUserProfile({
               user,
-              currentUserId: currentUser,
+              currentUserId: currentUser ?? '',
               close: closeDropdown,
               avatarRef,
             })
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/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/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx b/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx
index 74cc715c5..507412729 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<string | null>(null);
+  const inputTextRef = useRef<HTMLInputElement>(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,18 @@ 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/EditUserProfile/components/EditUserProfileUI/index.tsx b/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
index 76c1ad2bf..f8f13dc6f 100644
--- a/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
+++ b/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
@@ -94,7 +94,8 @@ export const EditUserProfileUI = () => {
     inputRef,
     updateUserInfo,
     setProfileImage,
-  } = useEditUserProfileUISates({ onEditProfile });
+  } = useEditUserProfileUISates({ onEditProfile: onEditProfile ?? (() => {}) })
+  ;
 
   return (
     <Modal
@@ -109,7 +110,7 @@ export const EditUserProfileUI = () => {
         formRef={formRef}
         inputRef={inputRef}
         setProfileImage={setProfileImage}
-        onThemeChange={onThemeChange}
+        onThemeChange={onThemeChange ?? (() => {})}
       />
     </Modal>
   );
diff --git a/src/modules/GroupChannel/components/Message/MessageView.tsx b/src/modules/GroupChannel/components/Message/MessageView.tsx
index f51781f13..cbd90b5d6 100644
--- a/src/modules/GroupChannel/components/Message/MessageView.tsx
+++ b/src/modules/GroupChannel/components/Message/MessageView.tsx
@@ -197,7 +197,7 @@ const MessageView = (props: MessageViewProps) => {
   }, []);
 
   useLayoutEffect(() => {
-    const timeouts = [];
+    const timeouts: NodeJS.Timeout[]  = [];
 
     if (animatedMessageId === message.messageId && messageScrollRef?.current) {
       timeouts.push(
diff --git a/src/modules/GroupChannel/components/Message/index.tsx b/src/modules/GroupChannel/components/Message/index.tsx
index 2a8f9b42f..082730855 100644
--- a/src/modules/GroupChannel/components/Message/index.tsx
+++ b/src/modules/GroupChannel/components/Message/index.tsx
@@ -59,11 +59,11 @@ export const Message = (props: MessageProps): React.ReactElement => {
       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}
+      isReactionEnabled={isReactionEnabled ?? false}
+      replyType={replyType ?? 'NONE'}
       threadReplySelectType={threadReplySelectType}
       nicknamesMap={nicknamesMap}
       renderUserMentionItem={renderUserMentionItem}
diff --git a/src/modules/GroupChannel/components/MessageList/index.tsx b/src/modules/GroupChannel/components/MessageList/index.tsx
index 6e47b5135..f8b29696a 100644
--- a/src/modules/GroupChannel/components/MessageList/index.tsx
+++ b/src/modules/GroupChannel/components/MessageList/index.tsx
@@ -159,8 +159,8 @@ export const MessageList = ({
             {messages.map((message, idx) => {
               const { chainTop, chainBottom, hasSeparator } = getMessagePartsInfo({
                 allMessages: messages as CoreMessageType[],
-                replyType,
-                isMessageGroupingEnabled,
+                replyType: replyType ?? '',
+                isMessageGroupingEnabled: isMessageGroupingEnabled ?? false,
                 currentIndex: idx,
                 currentMessage: message as CoreMessageType,
                 currentChannel,
diff --git a/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx b/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx
index 7bf622b62..e0952580d 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<NodeJS.Timeout | null>(null);
+  const [searchString, setSearchString] = useState<string>('');
   const [lastSearchString, setLastSearchString] = useState('');
   const [currentFocusedMember, setCurrentFocusedMember] = useState<User | null>(null);
   const [currentMemberList, setCurrentMemberList] = useState<Member[]>([]);
 
   useEffect(() => {
-    clearTimeout(timer);
+    clearTimeout(timer ?? undefined);
     setTimer(
       setTimeout(() => {
         setSearchString(targetNickname);
@@ -67,7 +67,7 @@ export const SuggestedMentionListView = (props: SuggestedMentionListViewProps) =
 
   useEffect(() => {
     if (inputEvent?.key === MessageInputKeys.Enter) {
-      if (currentMemberList.length > 0) {
+      if (currentFocusedMember && currentMemberList.length > 0) {
         onUserItemClick?.(currentFocusedMember);
       }
     }
diff --git a/src/modules/GroupChannel/context/GroupChannelProvider.tsx b/src/modules/GroupChannel/context/GroupChannelProvider.tsx
index dcbb28341..034923937 100644
--- a/src/modules/GroupChannel/context/GroupChannelProvider.tsx
+++ b/src/modules/GroupChannel/context/GroupChannelProvider.tsx
@@ -139,10 +139,10 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   const { markAsReadScheduler } = 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();
@@ -201,17 +201,19 @@ 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 });
+          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 });
+            }
           }
         });
       });
@@ -224,15 +226,17 @@ 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 });
+          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 });
+            }
           }
         });
       });
diff --git a/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx b/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
index 8c3baca0c..ec5c420f8 100644
--- a/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
+++ b/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
@@ -81,9 +81,9 @@ export const GroupChannelListUI = (props: GroupChannelListUIProps) => {
       renderPlaceHolderError={renderPlaceHolderError}
       renderPlaceHolderLoading={renderPlaceHolderLoading}
       renderPlaceHolderEmptyList={renderPlaceHolderEmptyList}
-      onChangeTheme={onThemeChange}
+      onChangeTheme={onThemeChange ?? (()=>{})}
       allowProfileEdit={allowProfileEdit}
-      onUserProfileUpdated={onUserProfileUpdated}
+      onUserProfileUpdated={onUserProfileUpdated ?? (() => {})}
       channels={groupChannels}
       onLoadMore={loadMore}
       initialized={initialized}
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 e6f71cd87..802220640 100644
--- a/src/modules/MessageSearch/context/MessageSearchProvider.tsx
+++ b/src/modules/MessageSearch/context/MessageSearchProvider.tsx
@@ -49,7 +49,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 {
@@ -102,8 +102,8 @@ const MessageSearchProvider: React.FC<MessageSearchProviderProps> = (props: Mess
     { channelUrl, sdkInit },
     { sdk, logger, messageSearchDispatcher },
   );
-
-  const requestString = useSearchStringEffect({ searchString }, { messageSearchDispatcher });
+  
+  const requestString = useSearchStringEffect({ searchString: searchString ?? '' }, { messageSearchDispatcher });
 
   useGetSearchMessages(
     { currentChannel, channelUrl, requestString, messageSearchQuery, onResultLoaded, retryCount },
diff --git a/src/modules/MessageSearch/context/hooks/useGetSearchedMessages.ts b/src/modules/MessageSearch/context/hooks/useGetSearchedMessages.ts
index 543c77a40..4ae124c18 100644
--- a/src/modules/MessageSearch/context/hooks/useGetSearchedMessages.ts
+++ b/src/modules/MessageSearch/context/hooks/useGetSearchedMessages.ts
@@ -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/useSearchStringEffect.ts b/src/modules/MessageSearch/context/hooks/useSearchStringEffect.ts
index 9235ca3d4..07ccd581b 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<NodeJS.Timeout | null>(null);
   useEffect(() => {
-    clearTimeout(debouncingTimer);
+    clearTimeout(debouncingTimer ?? undefined);
     if (searchString) {
       setDebouncingTimer(
         setTimeout(() => {
diff --git a/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx b/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx
index 85f33bbef..f52da218e 100644
--- a/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx
+++ b/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx
@@ -52,7 +52,7 @@ export default function MessagOpenChannelMessageeHoc(
   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/context/dux/reducers.ts b/src/modules/OpenChannel/context/dux/reducers.ts
index 7aeeb1732..95a1bbdfb 100644
--- a/src/modules/OpenChannel/context/dux/reducers.ts
+++ b/src/modules/OpenChannel/context/dux/reducers.ts
@@ -3,6 +3,7 @@ import * as actionTypes from './actionTypes';
 
 import compareIds from '../../../../utils/compareIds';
 import { SendableMessageType } from '../../../../utils';
+import { OpenChannel } from '@sendbird/chat/openChannel';
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 // @ts-ignore: Unreachable code error
diff --git a/src/modules/OpenChannel/context/hooks/useSendMessageCallback.ts b/src/modules/OpenChannel/context/hooks/useSendMessageCallback.ts
index 4535d531f..7f2a4b8ec 100644
--- a/src/modules/OpenChannel/context/hooks/useSendMessageCallback.ts
+++ b/src/modules/OpenChannel/context/hooks/useSendMessageCallback.ts
@@ -26,7 +26,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,7 +38,7 @@ 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;
diff --git a/src/modules/OpenChannel/context/utils.ts b/src/modules/OpenChannel/context/utils.ts
index 70198abd1..80b5f01ed 100644
--- a/src/modules/OpenChannel/context/utils.ts
+++ b/src/modules/OpenChannel/context/utils.ts
@@ -31,7 +31,7 @@ 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);
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 b4ee993a9..dfe0dc1c8 100644
--- a/src/modules/OpenChannelApp/components/CommunityChannelList.tsx
+++ b/src/modules/OpenChannelApp/components/CommunityChannelList.tsx
@@ -48,8 +48,8 @@ function CommunityChannelList({
 }: Props): ReactElement {
   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<HTMLInputElement>(null);
   const { stringSet } = useContext(LocalizationContext);
@@ -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,15 +143,18 @@ 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]);
+                      if(e.target.files) {
+                        setCurrentImage(URL.createObjectURL(e.target.files[0]));
+                        setCurrentFile(e.target.files[0]);
+                      }
+                     
                       if (hiddenInputRef.current) {
                         hiddenInputRef.current.value = '';
                       }
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/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/useSetupOpenChannelList.ts b/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts
index 0307f899a..73dc5343b 100644
--- a/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts
+++ b/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts
@@ -30,7 +30,6 @@ function useSetupOpenChannelList(
   useEffect(() => {
     if (sdkInitialized) {
       if (sdk?.openChannel) {
-        if (sdk?.openChannel?.createOpenChannelListQuery) {
           logger.info('OpenChannelList|useSetupOpenChannelList: Setup OpenChannelList', { sdkInitialized });
           const channelListQuery = createChannelListQuery({
             sdk,
@@ -64,9 +63,6 @@ function useSetupOpenChannelList(
           } else {
             logger.info('OpenChannelList|useSetupOpenChannelList: There is no more channels');
           }
-        } else {
-          logger.warning('OpenChannelList|useSetupOpenChannelList: createOpenChannelListQuery is not included in the openChannel', sdk.openChannel);
-        }
       } 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 5ac79c069..2a1606538 100644
--- a/src/modules/OpenChannelSettings/components/EditDetailsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/EditDetailsModal.tsx
@@ -38,8 +38,8 @@ const EditDetails = (props: Props): ReactElement => {
   const inputRef = useRef<HTMLInputElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
   const hiddenInputRef = useRef<HTMLInputElement>(null);
-  const [currentImg, setCurrentImg] = useState(null);
-  const [newFile, setNewFile] = useState(null);
+  const [currentImg, setCurrentImg] = useState<string | null>(null);
+  const [newFile, setNewFile] = useState<File | null>(null);
   const { stringSet } = useContext(LocalizationContext);
   const title = channel?.name;
   return (
@@ -59,10 +59,10 @@ const EditDetails = (props: Props): ReactElement => {
         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);
@@ -115,8 +115,10 @@ 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]);
+              if(e.target.files){
+                setCurrentImg(URL.createObjectURL(e.target.files[0]));
+                setNewFile(e.target.files[0]);
+              }
               if (hiddenInputRef.current)
                 hiddenInputRef.current.value = '';
             }}
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx
index 0637e17f3..da9c40d3e 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx
@@ -17,7 +17,7 @@ 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';
+import { type Participant, RestrictedUser } from '@sendbird/chat';
 
 export const BannedUserList = (): ReactElement => {
   const [bannedUsers, setBannedUsers] = useState<RestrictedUser[]>([]);
@@ -99,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 d136e9d8e..f6b02f24b 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx
@@ -112,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 b7fee2583..8a69f4825 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantList.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantList.tsx
@@ -104,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 ad7fd387c..aca698d74 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx
@@ -115,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 a9702c325..7587fbbb3 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/OperatorList.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/OperatorList.tsx
@@ -97,7 +97,7 @@ const OperatorList = (): ReactElement => {
                       </MenuItems>
                     )}
                   />
-                ) : null
+                ) : <></>
             )}
           />
         ))
@@ -113,7 +113,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 0c41358a4..506aeb253 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/OperatorsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/OperatorsModal.tsx
@@ -111,7 +111,7 @@ export default function OperatorListModal({ onCancel }: Props): ReactElement {
                           </MenuItems>
                         )}
                       />
-                    ) : null
+                    ) : <></>
                 )}
               />
             ))
diff --git a/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantsModal.tsx b/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantsModal.tsx
index cfbee4630..a3e2e583d 100644
--- a/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantsModal.tsx
@@ -161,7 +161,7 @@ export default function ParticipantsModal({
                           )}
                         />
                       )
-                      : null
+                      : <></>
                   }
                 />
               );
diff --git a/src/modules/OpenChannelSettings/context/OpenChannelSettingsProvider.tsx b/src/modules/OpenChannelSettings/context/OpenChannelSettingsProvider.tsx
index fc5327e68..9896b83ef 100644
--- a/src/modules/OpenChannelSettings/context/OpenChannelSettingsProvider.tsx
+++ b/src/modules/OpenChannelSettings/context/OpenChannelSettingsProvider.tsx
@@ -31,7 +31,7 @@ interface OpenChannelSettingsContextType {
   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 {
diff --git a/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx b/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx
index 15388038f..cc44bbf93 100644
--- a/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx
+++ b/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx
@@ -72,7 +72,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
@@ -84,7 +85,7 @@ export default function ParentMessageInfoItem({
   const tokens = useMemo(() => {
     if (isMentionedMessage) {
       return tokenizeMessage({
-        mentionedUsers: message?.mentionedUsers,
+        mentionedUsers: message?.mentionedUsers ?? undefined,
         messageText: message?.mentionedMessageTemplate,
       });
     }
@@ -237,7 +238,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/RemoveMessageModal.tsx b/src/modules/Thread/components/RemoveMessageModal.tsx
index 2c2395279..2e9fe5d46 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 ? message.threadInfo.replyCount > 0 : false}
       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 0a727570a..a32074d3c 100644
--- a/src/modules/Thread/components/ThreadHeader/index.tsx
+++ b/src/modules/Thread/components/ThreadHeader/index.tsx
@@ -29,7 +29,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;

From 7e4f6e451083e65c6aab9ef3c961f75f8015f2cb Mon Sep 17 00:00:00 2001
From: OnestarLee <onestar.lee@sendbird.com>
Date: Fri, 5 Apr 2024 16:27:56 +0900
Subject: [PATCH 4/6] fix type error

---
 .../ChannelSettings/components/EditDetailsModal/index.tsx     | 4 +++-
 .../components/CreateOpenChannelUI/index.tsx                  | 3 ++-
 src/modules/GroupChannel/components/MessageList/index.tsx     | 2 +-
 .../SuggestedMentionList/SuggestedMentionListView.tsx         | 2 +-
 src/modules/OpenChannel/context/dux/reducers.ts               | 1 -
 src/modules/OpenChannel/context/utils.ts                      | 4 +++-
 .../components/OperatorUI/BannedUserList.tsx                  | 2 +-
 7 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx b/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
index 53d89ea27..1a31e1353 100644
--- a/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
+++ b/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
@@ -127,7 +127,9 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
                 setCurrentImg(URL.createObjectURL(e.target.files[0]));
                 setNewFile(e.target.files[0]);
               }
-              if (hiddenInputRef.current) {hiddenInputRef.current.value = '';}
+              if (hiddenInputRef.current) {
+                hiddenInputRef.current.value = '';
+              }
             }}
           />
           <TextButton
diff --git a/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx b/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx
index 507412729..fdc918c80 100644
--- a/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx
+++ b/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx
@@ -96,8 +96,9 @@ function CreateOpenChannelUI({
                       setNewFile(e.target.files[0]);
                     }
                     
-                    if(inputFileRef.current)
+                    if (inputFileRef.current) {
                       inputFileRef.current.value = '';
+                    }
                   }}
                 />
                 <TextButton
diff --git a/src/modules/GroupChannel/components/MessageList/index.tsx b/src/modules/GroupChannel/components/MessageList/index.tsx
index f8b29696a..df4ee1e96 100644
--- a/src/modules/GroupChannel/components/MessageList/index.tsx
+++ b/src/modules/GroupChannel/components/MessageList/index.tsx
@@ -159,7 +159,7 @@ export const MessageList = ({
             {messages.map((message, idx) => {
               const { chainTop, chainBottom, hasSeparator } = getMessagePartsInfo({
                 allMessages: messages as CoreMessageType[],
-                replyType: replyType ?? '',
+                replyType: replyType ?? 'NONE',
                 isMessageGroupingEnabled: isMessageGroupingEnabled ?? false,
                 currentIndex: idx,
                 currentMessage: message as CoreMessageType,
diff --git a/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx b/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx
index e0952580d..8ae91cf7d 100644
--- a/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx
+++ b/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx
@@ -50,7 +50,7 @@ export const SuggestedMentionListView = (props: SuggestedMentionListViewProps) =
   const currentUserId = stores?.sdkStore?.sdk?.currentUser?.userId || '';
   const scrollRef = useRef(null);
   const { stringSet } = useLocalization();
-  const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
+  const [timer, setTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
   const [searchString, setSearchString] = useState<string>('');
   const [lastSearchString, setLastSearchString] = useState('');
   const [currentFocusedMember, setCurrentFocusedMember] = useState<User | null>(null);
diff --git a/src/modules/OpenChannel/context/dux/reducers.ts b/src/modules/OpenChannel/context/dux/reducers.ts
index 95a1bbdfb..7aeeb1732 100644
--- a/src/modules/OpenChannel/context/dux/reducers.ts
+++ b/src/modules/OpenChannel/context/dux/reducers.ts
@@ -3,7 +3,6 @@ import * as actionTypes from './actionTypes';
 
 import compareIds from '../../../../utils/compareIds';
 import { SendableMessageType } from '../../../../utils';
-import { OpenChannel } from '@sendbird/chat/openChannel';
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 // @ts-ignore: Unreachable code error
diff --git a/src/modules/OpenChannel/context/utils.ts b/src/modules/OpenChannel/context/utils.ts
index 80b5f01ed..0059964d9 100644
--- a/src/modules/OpenChannel/context/utils.ts
+++ b/src/modules/OpenChannel/context/utils.ts
@@ -31,7 +31,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
-    if (scrollDOM) {scrollDOM.scrollTop = scrollDOM.scrollHeight;}
+    if (scrollDOM) {
+      scrollDOM.scrollTop = scrollDOM.scrollHeight;
+    }
   } catch (error) {
     setTimeout(() => {
       scrollIntoLast(currentTry + 1, scrollRef);
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx
index da9c40d3e..422a51e9a 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx
@@ -17,7 +17,7 @@ import { UserListItem } from '../ParticipantUI/ParticipantItem';
 import { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
-import { type Participant, RestrictedUser } from '@sendbird/chat';
+import { RestrictedUser } from '@sendbird/chat';
 
 export const BannedUserList = (): ReactElement => {
   const [bannedUsers, setBannedUsers] = useState<RestrictedUser[]>([]);

From 5f9eb5d0eb05a5717ff4a898b9e1849842343372 Mon Sep 17 00:00:00 2001
From: OnestarLee <onestar.lee@sendbird.com>
Date: Tue, 9 Apr 2024 14:36:38 +0900
Subject: [PATCH 5/6] apply review

---
 src/modules/GroupChannel/components/Message/MessageView.tsx     | 2 +-
 .../MessageSearch/context/hooks/useSearchStringEffect.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/GroupChannel/components/Message/MessageView.tsx b/src/modules/GroupChannel/components/Message/MessageView.tsx
index cbd90b5d6..2859716f0 100644
--- a/src/modules/GroupChannel/components/Message/MessageView.tsx
+++ b/src/modules/GroupChannel/components/Message/MessageView.tsx
@@ -197,7 +197,7 @@ const MessageView = (props: MessageViewProps) => {
   }, []);
 
   useLayoutEffect(() => {
-    const timeouts: NodeJS.Timeout[]  = [];
+    const timeouts: ReturnType<typeof setTimeout>[]  = [];
 
     if (animatedMessageId === message.messageId && messageScrollRef?.current) {
       timeouts.push(
diff --git a/src/modules/MessageSearch/context/hooks/useSearchStringEffect.ts b/src/modules/MessageSearch/context/hooks/useSearchStringEffect.ts
index 07ccd581b..7995546bc 100644
--- a/src/modules/MessageSearch/context/hooks/useSearchStringEffect.ts
+++ b/src/modules/MessageSearch/context/hooks/useSearchStringEffect.ts
@@ -16,7 +16,7 @@ function useSearchStringEffect(
   { messageSearchDispatcher }: StaticParams,
 ): string {
   const [requestString, setRequestString] = useState<string>('');
-  const [debouncingTimer, setDebouncingTimer] = useState<NodeJS.Timeout | null>(null);
+  const [debouncingTimer, setDebouncingTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
     clearTimeout(debouncingTimer ?? undefined);
     if (searchString) {

From 525fa94e418f49ccd47e10bd3b76a6926ffd2f34 Mon Sep 17 00:00:00 2001
From: OnestarLee <onestar.lee@sendbird.com>
Date: Tue, 9 Apr 2024 14:41:05 +0900
Subject: [PATCH 6/6] apply review

---
 .../context/hooks/useUpdateMessageCallback.ts |  2 +-
 .../components/ChannelSettingsUI/index.tsx    |  2 +-
 .../components/EditDetailsModal/index.tsx     |  2 +-
 .../components/LeaveChannel/index.tsx         |  2 +-
 .../ModerationPanel/BannedUserList.tsx        |  4 +-
 .../ModerationPanel/InviteUsersModal.tsx      |  2 +-
 .../ModerationPanel/MembersModal.tsx          |  2 +-
 .../ModerationPanel/MutedMemberList.tsx       |  2 +-
 .../ModerationPanel/MutedMembersModal.tsx     |  2 +-
 .../ModerationPanel/OperatorsModal.tsx        |  2 +-
 .../components/CreateOpenChannelUI/index.tsx  |  4 +-
 .../EditUserProfileUIView.tsx                 |  6 +-
 .../components/EditUserProfileUI/index.tsx    |  4 +-
 .../components/Message/MessageView.tsx        |  2 +-
 .../MessageInputWrapperView.tsx               |  2 +-
 .../context/GroupChannelProvider.tsx          |  4 +-
 .../components/GroupChannelListUI/index.tsx   |  2 +-
 .../context/MessageSearchProvider.tsx         |  2 +-
 .../components/CommunityChannelList.tsx       |  4 +-
 .../context/hooks/useSetupOpenChannelList.ts  | 62 +++++++++----------
 .../components/EditDetailsModal.tsx           |  2 +-
 .../OperatorUI/AddOperatorsModal.tsx          |  2 +-
 .../OperatorUI/MutedParticipantsModal.tsx     |  2 +-
 src/modules/Thread/context/utils.ts           |  2 +-
 src/ui/Avatar/index.tsx                       |  2 +-
 src/ui/ContextMenu/MenuItems.tsx              | 10 +--
 src/ui/ImageRenderer/index.tsx                | 12 ++--
 src/ui/LegacyEditUserProfile/index.tsx        |  2 +-
 .../MessageContent/MessageProfile/index.tsx   |  2 +-
 src/ui/MessageContent/index.tsx               |  2 +-
 src/ui/MessageInput/hooks/usePaste/index.ts   |  6 +-
 src/ui/MessageInput/index.tsx                 |  6 +-
 src/ui/MessageItemReactionMenu/index.tsx      |  2 +-
 src/ui/MultipleFilesMessageItemBody/index.tsx |  2 +-
 src/ui/QuoteMessage/index.tsx                 |  2 +-
 .../QuoteMessageThumbnail.tsx                 |  2 +-
 src/ui/TooltipWrapper/index.tsx               |  2 +-
 src/ui/VoiceMessageItemBody/index.tsx         |  3 +-
 src/ui/Word/index.tsx                         |  2 +-
 src/utils/numberToPx.ts                       |  2 +-
 40 files changed, 90 insertions(+), 91 deletions(-)

diff --git a/src/modules/Channel/context/hooks/useUpdateMessageCallback.ts b/src/modules/Channel/context/hooks/useUpdateMessageCallback.ts
index c5bc48592..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&& mentionedUsers.length > 0) {
+        if (isMentionEnabled && mentionedUsers && mentionedUsers.length > 0) {
           params.mentionedUsers = mentionedUsers;
         }
         if (isMentionEnabled && mentionTemplate) {
diff --git a/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx b/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx
index 92eb4b060..c5ac82496 100644
--- a/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx
+++ b/src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx
@@ -33,7 +33,7 @@ const ChannelSettingsUI: React.FC<ChannelSettingsUIProps> = ({
   const { stringSet } = useContext(LocalizationContext);
 
   const state = useSendbirdStateContext();
-  const { channel, invalidChannel, onCloseClick, loading } = useChannelSettingsContext() ?? {}
+  const { channel, invalidChannel, onCloseClick, loading } = useChannelSettingsContext() ?? {};
 
   const [showLeaveChannelModal, setShowLeaveChannelModal] = useState(false);
 
diff --git a/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx b/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
index 1a31e1353..84bc412da 100644
--- a/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
+++ b/src/modules/ChannelSettings/components/EditDetailsModal/index.tsx
@@ -123,7 +123,7 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
             accept="image/gif, image/jpeg, image/png"
             style={{ display: 'none' }}
             onChange={(e) => {
-              if(e.target.files) {
+              if (e.target.files) {
                 setCurrentImg(URL.createObjectURL(e.target.files[0]));
                 setNewFile(e.target.files[0]);
               }
diff --git a/src/modules/ChannelSettings/components/LeaveChannel/index.tsx b/src/modules/ChannelSettings/components/LeaveChannel/index.tsx
index 2b8e57841..1a818736a 100644
--- a/src/modules/ChannelSettings/components/LeaveChannel/index.tsx
+++ b/src/modules/ChannelSettings/components/LeaveChannel/index.tsx
@@ -26,7 +26,7 @@ const LeaveChannel: React.FC<LeaveChannelProps> = (props: LeaveChannelProps) =>
     onSubmit = noop,
     onCancel = noop,
   } = props;
-  
+
   const { channel, onLeaveChannel } = useChannelSettingsContext() ?? {};
   const { stringSet } = useLocalization();
   const state = useSendbirdStateContext();
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx
index 30670fe7f..68571e744 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, RestrictedUser, User } from '@sendbird/chat';
+import { BannedUserListQueryParams, RestrictedUser } from '@sendbird/chat';
 
 import Button, { ButtonTypes, ButtonSizes } from '../../../../ui/Button';
 import
@@ -54,7 +54,7 @@ export const BannedMemberList = (): ReactElement => {
       setHasNext(bannedUserListQuery.hasNext);
     });
   }, [channel]);
-  
+
   return (
     <>
       {
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx
index dd5a7694a..681956b73 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx
@@ -24,7 +24,7 @@ export default function InviteUsers({ onCancel, onSubmit }: Props) {
   const state = useSendbirdStateContext();
   const sdk = state?.stores?.sdkStore?.sdk;
   const globalUserListQuery = state?.config?.userListQuery;
-  
+
   const { channel, overrideInviteUser, queries } = useChannelSettingsContext() || {};
   const { stringSet } = useLocalization();
 
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx
index e6178b399..a7099e23a 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx
@@ -24,7 +24,7 @@ interface Props {
 export default function MembersModal({ onCancel }: Props): ReactElement {
   const [members, setMembers] = useState<Member[]>([]);
   const [memberQuery, setMemberQuery] = useState<MemberListQuery | null>(null);
-  
+
   const channel = useChannelSettingsContext()?.channel;
   const state = useSendbirdStateContext();
   const currentUser = state?.config?.userId;
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx
index 9e39e91d9..8e2f347a5 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx
@@ -26,7 +26,7 @@ export const MutedMemberList = (): ReactElement => {
   const [hasNext, setHasNext] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const { stringSet } = useLocalization();
-  
+
   const channel = useChannelSettingsContext()?.channel;
   const state = useSendbirdStateContext();
   const currentUser = state?.config?.userId;
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx
index 5da351470..aa002ae6b 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx
@@ -24,7 +24,7 @@ export default function MutedMembersModal({
 }: Props): ReactElement {
   const [members, setMembers] = useState<Member[]>([]);
   const [memberQuery, setMemberQuery] = useState<MemberListQuery | null>(null);
-  
+
   const channel = useChannelSettingsContext()?.channel;
   const state = useSendbirdStateContext();
   const currentUser = state?.config?.userId;
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx
index b6f06738e..6b6dc0653 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx
@@ -21,7 +21,7 @@ interface Props { onCancel?(): void }
 export default function OperatorsModal({ onCancel }: Props): ReactElement {
   const [operators, setOperators] = useState<User[]>([]);
   const [operatorQuery, setOperatorQuery] = useState<OperatorListQuery | null>(null);
-  
+
   const channel = useChannelSettingsContext()?.channel;
   const state = useSendbirdStateContext();
   const currentUserId = state?.config?.userId;
diff --git a/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx b/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx
index fdc918c80..6589e6ea1 100644
--- a/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx
+++ b/src/modules/CreateOpenChannel/components/CreateOpenChannelUI/index.tsx
@@ -91,11 +91,11 @@ function CreateOpenChannelUI({
                   accept="image/gif, image/jpeg, image/png"
                   style={{ display: 'none' }}
                   onChange={(e) => {
-                    if(e.target.files) {
+                    if (e.target.files) {
                       setCurrentImg(URL.createObjectURL(e.target.files[0]));
                       setNewFile(e.target.files[0]);
                     }
-                    
+
                     if (inputFileRef.current) {
                       inputFileRef.current.value = '';
                     }
diff --git a/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx b/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx
index 40e8791f0..d5766999e 100644
--- a/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx
+++ b/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx
@@ -24,7 +24,7 @@ export const EditUserProfileUIView = ({
   const { theme, setCurrentTheme } = config;
   const user = stores.userStore?.user;
   const { stringSet } = useLocalization();
-  
+
   const [currentImg, setCurrentImg] = useState<string | null>(null);
   const hiddenInputRef = useRef<HTMLInputElement>(null);
 
@@ -51,11 +51,11 @@ export const EditUserProfileUIView = ({
           accept="image/gif, image/jpeg, image/png"
           style={{ display: 'none' }}
           onChange={(e) => {
-            if(e.target.files) {
+            if (e.target.files) {
               setCurrentImg(URL.createObjectURL(e.target.files[0]));
               setProfileImage(e.target.files[0]);
             }
-            
+
             if (hiddenInputRef.current) {
               hiddenInputRef.current.value = '';
             }
diff --git a/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx b/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
index f8f13dc6f..9dd265c82 100644
--- a/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
+++ b/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
@@ -94,9 +94,7 @@ export const EditUserProfileUI = () => {
     inputRef,
     updateUserInfo,
     setProfileImage,
-  } = useEditUserProfileUISates({ onEditProfile: onEditProfile ?? (() => {}) })
-  ;
-
+  } = useEditUserProfileUISates({ onEditProfile: onEditProfile ?? (() => {}) });
   return (
     <Modal
       titleText={stringSet.EDIT_PROFILE__TITLE}
diff --git a/src/modules/GroupChannel/components/Message/MessageView.tsx b/src/modules/GroupChannel/components/Message/MessageView.tsx
index 2859716f0..801a6a071 100644
--- a/src/modules/GroupChannel/components/Message/MessageView.tsx
+++ b/src/modules/GroupChannel/components/Message/MessageView.tsx
@@ -197,7 +197,7 @@ const MessageView = (props: MessageViewProps) => {
   }, []);
 
   useLayoutEffect(() => {
-    const timeouts: ReturnType<typeof setTimeout>[]  = [];
+    const timeouts: ReturnType<typeof setTimeout>[] = [];
 
     if (animatedMessageId === message.messageId && messageScrollRef?.current) {
       timeouts.push(
diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
index 41f2519ac..97fd72c02 100644
--- a/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
+++ b/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
@@ -93,7 +93,7 @@ export const MessageInputWrapperView = React.forwardRef((
 
   // States
   const [mentionNickname, setMentionNickname] = useState('');
-  const [mentionedUsers, setMentionedUsers]= useState<User[]>([]);
+  const [mentionedUsers, setMentionedUsers] = useState<User[]>([]);
   const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([]);
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState<User[]>([]);
diff --git a/src/modules/GroupChannel/context/GroupChannelProvider.tsx b/src/modules/GroupChannel/context/GroupChannelProvider.tsx
index 034923937..98e9b0b00 100644
--- a/src/modules/GroupChannel/context/GroupChannelProvider.tsx
+++ b/src/modules/GroupChannel/context/GroupChannelProvider.tsx
@@ -209,7 +209,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
           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 });
@@ -233,7 +233,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
           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 });
             }
diff --git a/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx b/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
index ec5c420f8..cb286e804 100644
--- a/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
+++ b/src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx
@@ -81,7 +81,7 @@ export const GroupChannelListUI = (props: GroupChannelListUIProps) => {
       renderPlaceHolderError={renderPlaceHolderError}
       renderPlaceHolderLoading={renderPlaceHolderLoading}
       renderPlaceHolderEmptyList={renderPlaceHolderEmptyList}
-      onChangeTheme={onThemeChange ?? (()=>{})}
+      onChangeTheme={onThemeChange ?? (() => {})}
       allowProfileEdit={allowProfileEdit}
       onUserProfileUpdated={onUserProfileUpdated ?? (() => {})}
       channels={groupChannels}
diff --git a/src/modules/MessageSearch/context/MessageSearchProvider.tsx b/src/modules/MessageSearch/context/MessageSearchProvider.tsx
index 802220640..9d18ed72d 100644
--- a/src/modules/MessageSearch/context/MessageSearchProvider.tsx
+++ b/src/modules/MessageSearch/context/MessageSearchProvider.tsx
@@ -102,7 +102,7 @@ const MessageSearchProvider: React.FC<MessageSearchProviderProps> = (props: Mess
     { channelUrl, sdkInit },
     { sdk, logger, messageSearchDispatcher },
   );
-  
+
   const requestString = useSearchStringEffect({ searchString: searchString ?? '' }, { messageSearchDispatcher });
 
   useGetSearchMessages(
diff --git a/src/modules/OpenChannelApp/components/CommunityChannelList.tsx b/src/modules/OpenChannelApp/components/CommunityChannelList.tsx
index dfe0dc1c8..dcd5e30d8 100644
--- a/src/modules/OpenChannelApp/components/CommunityChannelList.tsx
+++ b/src/modules/OpenChannelApp/components/CommunityChannelList.tsx
@@ -150,11 +150,11 @@ function CommunityChannelList({
                     accept="image/gif, image/jpeg, image/png"
                     style={{ display: 'none' }}
                     onChange={(e) => {
-                      if(e.target.files) {
+                      if (e.target.files) {
                         setCurrentImage(URL.createObjectURL(e.target.files[0]));
                         setCurrentFile(e.target.files[0]);
                       }
-                     
+
                       if (hiddenInputRef.current) {
                         hiddenInputRef.current.value = '';
                       }
diff --git a/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts b/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts
index 73dc5343b..3cf280862 100644
--- a/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts
+++ b/src/modules/OpenChannelList/context/hooks/useSetupOpenChannelList.ts
@@ -30,39 +30,39 @@ function useSetupOpenChannelList(
   useEffect(() => {
     if (sdkInitialized) {
       if (sdk?.openChannel) {
-          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.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 2a1606538..514e2a8bc 100644
--- a/src/modules/OpenChannelSettings/components/EditDetailsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/EditDetailsModal.tsx
@@ -115,7 +115,7 @@ const EditDetails = (props: Props): ReactElement => {
             accept="image/gif, image/jpeg, image/png"
             style={{ display: 'none' }}
             onChange={(e) => {
-              if(e.target.files){
+              if (e.target.files) {
                 setCurrentImg(URL.createObjectURL(e.target.files[0]));
                 setNewFile(e.target.files[0]);
               }
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx
index 8abe8adf1..dc7d6573f 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx
@@ -40,7 +40,7 @@ export default function AddOperatorsModal({
     participantListQuery?.next().then((users) => {
       setParticipants(users);
     });
-    if (participantListQuery) {setParticipantQuery(participantListQuery);}
+    if (participantListQuery) { setParticipantQuery(participantListQuery); }
   }, []);
 
   const selectedCount = Object.keys(selectedUsers).filter((m) => selectedUsers[m]).length;
diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx
index aca698d74..7b50bbdea 100644
--- a/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx
+++ b/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx
@@ -38,7 +38,7 @@ export default function MutedParticipantsModal({
     mutedUserListQuery?.next().then((users) => {
       setMutedUsers(users);
     });
-    if (mutedUserListQuery) {setUserListQuery(mutedUserListQuery);}
+    if (mutedUserListQuery) { setUserListQuery(mutedUserListQuery); }
   }, []);
   return (
     <div>
diff --git a/src/modules/Thread/context/utils.ts b/src/modules/Thread/context/utils.ts
index e4bb003f2..69224b55c 100644
--- a/src/modules/Thread/context/utils.ts
+++ b/src/modules/Thread/context/utils.ts
@@ -72,7 +72,7 @@ export const scrollIntoLast = (intialTry = 0): void => {
   try {
     const scrollDOM = document.querySelector('.sendbird-thread-ui--scroll');
     // eslint-disable-next-line no-multi-assign
-    if (scrollDOM) {scrollDOM.scrollTop = scrollDOM.scrollHeight;}
+    if (scrollDOM) { scrollDOM.scrollTop = scrollDOM.scrollHeight; }
   } catch (error) {
     setTimeout(() => {
       scrollIntoLast(currentTry + 1);
diff --git a/src/ui/Avatar/index.tsx b/src/ui/Avatar/index.tsx
index adbd374d0..d9fc68eb6 100644
--- a/src/ui/Avatar/index.tsx
+++ b/src/ui/Avatar/index.tsx
@@ -195,4 +195,4 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
       </div>
     );
   });
-export default Avatar;
\ No newline at end of file
+export default Avatar;
diff --git a/src/ui/ContextMenu/MenuItems.tsx b/src/ui/ContextMenu/MenuItems.tsx
index 81de49b9a..8afffeaf9 100644
--- a/src/ui/ContextMenu/MenuItems.tsx
+++ b/src/ui/ContextMenu/MenuItems.tsx
@@ -24,7 +24,7 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
   constructor(props: MenuItemsProps) {
     super(props);
     this.state = {
-      menuStyle: {top: 0, left: 0},
+      menuStyle: { top: 0, left: 0 },
       handleClickOutside: () => { /* noop */ },
     };
   }
@@ -99,15 +99,15 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
     this.setState({ menuStyle });
     return menuStyle;
   };
-  
+
   render(): ReactElement {
     const portalElement = document.getElementById('sendbird-dropdown-portal');
     if (!portalElement)
       return <></>;
-    
+
     const { menuStyle } = this.state;
     const { children, style, className = '' } = this.props;
-    
+
     return (
       createPortal(
         (
@@ -128,7 +128,7 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
             </ul>
           </div>
         ),
-        portalElement
+        portalElement,
       )
     );
   }
diff --git a/src/ui/ImageRenderer/index.tsx b/src/ui/ImageRenderer/index.tsx
index 9603ac147..7b449abf6 100644
--- a/src/ui/ImageRenderer/index.tsx
+++ b/src/ui/ImageRenderer/index.tsx
@@ -64,7 +64,7 @@ const ImageRenderer = ({
   const ref = useRef(null);
   const isLoaded = useLazyImageLoader(ref);
   const internalUrl = isLoaded ? url : null;
-  
+
   const [defaultComponentVisible, setDefaultComponentVisible] = useState(false);
   const [placeholderVisible, setPlaceholderVisible] = useState(true);
   const [dynamicMinWidth, dynamicMinHeight] = useDynamicSideLength({
@@ -73,7 +73,7 @@ const ImageRenderer = ({
     maxSideLength,
     defaultMinLength: '400px',
   });
-  
+
   const renderPlaceholder = () => {
     if (typeof placeHolder === 'function') {
       return placeHolder({
@@ -91,12 +91,12 @@ const ImageRenderer = ({
     }
     return placeHolder;
   };
-  
+
   const renderDefault = () => {
     if (typeof defaultComponent === 'function') return defaultComponent();
     return defaultComponent;
   };
-  
+
   const renderImage = () => {
     const backgroundStyle = internalUrl ? {
       backgroundRepeat: 'no-repeat',
@@ -104,7 +104,7 @@ const ImageRenderer = ({
       backgroundSize: 'cover',
       backgroundImage: `url(${internalUrl})`,
     } : {};
-    
+
     return (
       <div
         className="sendbird-image-renderer__image"
@@ -120,7 +120,7 @@ const ImageRenderer = ({
       />
     );
   };
-  
+
   return (
     dynamicMinWidth
     && dynamicMinHeight && (
diff --git a/src/ui/LegacyEditUserProfile/index.tsx b/src/ui/LegacyEditUserProfile/index.tsx
index 4ffa90151..675641ae6 100644
--- a/src/ui/LegacyEditUserProfile/index.tsx
+++ b/src/ui/LegacyEditUserProfile/index.tsx
@@ -85,7 +85,7 @@ export function EditUserProfile({
               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 = '';}
+                if (hiddenInputRef.current) { hiddenInputRef.current.value = ''; }
               }
             }}
           />
diff --git a/src/ui/MessageContent/MessageProfile/index.tsx b/src/ui/MessageContent/MessageProfile/index.tsx
index 3f036b116..ae2ef257e 100644
--- a/src/ui/MessageContent/MessageProfile/index.tsx
+++ b/src/ui/MessageContent/MessageProfile/index.tsx
@@ -18,7 +18,7 @@ export interface MessageProfileProps extends MessageContentProps {
 
 export default function MessageProfile(
   props: MessageProfileProps,
-): ReactElement | null{
+): ReactElement | null {
   const {
     message,
     channel,
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index fc5917b8c..bdd30d254 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -27,7 +27,7 @@ import { LocalizationContext, useLocalization } from '../../lib/LocalizationCont
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { EmojiContainer } from '@sendbird/chat';
-import { AdminMessage, Feedback, FeedbackRating, FileMessage, ThreadInfo, UserMessage } from '@sendbird/chat/message';
+import { AdminMessage, Feedback, FeedbackRating, FileMessage, UserMessage } from '@sendbird/chat/message';
 import useLongPress from '../../hooks/useLongPress';
 import MobileMenu from '../MobileMenu';
 import { useMediaQueryContext } from '../../lib/MediaQueryContext';
diff --git a/src/ui/MessageInput/hooks/usePaste/index.ts b/src/ui/MessageInput/hooks/usePaste/index.ts
index f9c6abe4d..097535140 100644
--- a/src/ui/MessageInput/hooks/usePaste/index.ts
+++ b/src/ui/MessageInput/hooks/usePaste/index.ts
@@ -56,18 +56,18 @@ export function usePaste({
         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/index.tsx b/src/ui/MessageInput/index.tsx
index fb60e9b0c..051324c52 100644
--- a/src/ui/MessageInput/index.tsx
+++ b/src/ui/MessageInput/index.tsx
@@ -292,10 +292,12 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
           backTextNode,
           ...childNodes.slice(endNodeIndex + 1),
         ];
-        if(textField){
+        if (textField) {
           textField.innerHTML = '';
           newNodes.forEach((newNode) => {
-            newNode && textField.appendChild(newNode);
+            if (newNode) {
+              textField.appendChild(newNode);
+            }
           });
         }
         onUserMentioned(mentionSelectedUser);
diff --git a/src/ui/MessageItemReactionMenu/index.tsx b/src/ui/MessageItemReactionMenu/index.tsx
index 043af3371..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 | null{
+}: MessageEmojiMenuProps): ReactElement | null {
   const triggerRef = useRef(null);
   const containerRef = useRef(null);
 
diff --git a/src/ui/MultipleFilesMessageItemBody/index.tsx b/src/ui/MultipleFilesMessageItemBody/index.tsx
index b306e5683..ab84fd835 100644
--- a/src/ui/MultipleFilesMessageItemBody/index.tsx
+++ b/src/ui/MultipleFilesMessageItemBody/index.tsx
@@ -34,7 +34,7 @@ export default function MultipleFilesMessageItemBody({
   isReactionEnabled = false,
   threadMessageKindKey,
   statefulFileInfoList = [],
-}: Props): ReactElement{
+}: Props): ReactElement {
   const [currentFileViewerIndex, setCurrentFileViewerIndex] = useState(-1);
 
   function onClose() {
diff --git a/src/ui/QuoteMessage/index.tsx b/src/ui/QuoteMessage/index.tsx
index 1d96008a0..cdf7b1b32 100644
--- a/src/ui/QuoteMessage/index.tsx
+++ b/src/ui/QuoteMessage/index.tsx
@@ -42,7 +42,7 @@ export default function QuoteMessage({
   onClick,
 }: Props): ReactElement {
   const { stringSet } = useContext(LocalizationContext);
-  
+
   const { parentMessage } = message as BaseMessage;
   const parentMessageSender = (parentMessage as SendableMessageType)?.sender;
   const parentMessageSenderNickname = (userId === parentMessageSender?.userId) ? stringSet.QUOTED_MESSAGE__CURRENT_USER : parentMessageSender?.nickname;
diff --git a/src/ui/QuoteMessageInput/QuoteMessageThumbnail.tsx b/src/ui/QuoteMessageInput/QuoteMessageThumbnail.tsx
index 7bc25b559..df9a785dd 100644
--- a/src/ui/QuoteMessageInput/QuoteMessageThumbnail.tsx
+++ b/src/ui/QuoteMessageInput/QuoteMessageThumbnail.tsx
@@ -21,7 +21,7 @@ interface Props {
 
 const componentClassname = 'sendbird-quote_message_input__avatar';
 
-export default function QuoteMessageThumbnail({ message }: Props): ReactElement{
+export default function QuoteMessageThumbnail({ message }: Props): ReactElement {
   if (!isFileMessage(message) && !isMultipleFilesMessage(message) || isVoiceMessage(message as FileMessage)) {
     return <></>;
   }
diff --git a/src/ui/TooltipWrapper/index.tsx b/src/ui/TooltipWrapper/index.tsx
index 95a59bf08..c1d6b9596 100644
--- a/src/ui/TooltipWrapper/index.tsx
+++ b/src/ui/TooltipWrapper/index.tsx
@@ -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%)` : undefined}}
+                style={{ left: childrenRef.current ? `calc(${childrenRef.current.offsetWidth / 2}px - 50%)` : undefined }}
               >
                 {hoverTooltip}
               </div>
diff --git a/src/ui/VoiceMessageItemBody/index.tsx b/src/ui/VoiceMessageItemBody/index.tsx
index 37991267b..93f12bf84 100644
--- a/src/ui/VoiceMessageItemBody/index.tsx
+++ b/src/ui/VoiceMessageItemBody/index.tsx
@@ -10,7 +10,6 @@ import Loader from '../Loader';
 import Icon, { IconTypes, IconColors } from '../Icon';
 import { LabelTypography, LabelColors } from '../Label';
 import { VOICE_PLAYER_STATUS } from '../../hooks/VoicePlayer/dux/initialState';
-import { string } from 'ts-pattern/dist/patterns';
 
 export interface VoiceMessageItemBodyProps {
   className?: string;
@@ -58,7 +57,7 @@ export const VoiceMessageItemBody = ({
     }
     return DEFAULT_MAX_SIZE;
   }, [message?.metaArrays]);
-  
+
   return (
     <div className={`sendbird-voice-message-item-body ${className} ${usingReaction ? 'is-reactions-contained' : ''}`}>
       <ProgressBar
diff --git a/src/ui/Word/index.tsx b/src/ui/Word/index.tsx
index f538d1701..43fd1def2 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 | null{
+export default function Word(props: WordProps): JSX.Element | null {
   const {
     word,
     message,
diff --git a/src/utils/numberToPx.ts b/src/utils/numberToPx.ts
index d2c925f90..4fa80fb29 100644
--- a/src/utils/numberToPx.ts
+++ b/src/utils/numberToPx.ts
@@ -1,6 +1,6 @@
 export default (value: string | number | null): string | undefined => {
   if (value === null)
     return undefined;
-  
+
   return typeof value === 'number' ? `${value}px` : value;
 };