fix: Fixed type error.

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();

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}

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);
           })

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) {

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}

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,

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);
 

src/modules/ChannelSettings/components/EditDetailsModal/index.tsx

@@ -29,19 +29,19 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
     onChannelModified,
     onBeforeUpdateChannel,
     setChannelUpdateId,
-  } = useChannelSettingsContext();
+  } = useChannelSettingsContext() ?? {};
   const title = channel?.name;
 
   const state = useSendbirdStateContext();
   const userId = state?.config?.userId;
   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,22 +51,22 @@ 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,
           currentImg,
         });
         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,18 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
             accept="image/gif, image/jpeg, image/png"
             style={{ display: 'none' }}
             onChange={(e) => {
-              setCurrentImg(URL.createObjectURL(e.target.files[0]));
-              setNewFile(e.target.files[0]);
-              hiddenInputRef.current.value = '';
+              if (e.target.files) {
+                setCurrentImg(URL.createObjectURL(e.target.files[0]));
+                setNewFile(e.target.files[0]);
+              }
+              if (hiddenInputRef.current) {
+                hiddenInputRef.current.value = '';
+              }
             }}
           />
           <TextButton
             className="channel-profile-form__avatar-button"
-            onClick={() => hiddenInputRef.current.click()}
+            onClick={() => hiddenInputRef.current?.click()}
             disableUnderline
           >
             <Label type={LabelTypography.BUTTON_1} color={LabelColors.PRIMARY}>

src/modules/ChannelSettings/components/LeaveChannel/index.tsx

@@ -27,7 +27,7 @@ const LeaveChannel: React.FC<LeaveChannelProps> = (props: LeaveChannelProps) =>
     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"

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 (
     <>
       {

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();
 

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;

src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx

@@ -19,13 +19,14 @@ 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();
-  
+
   const channel = useChannelSettingsContext()?.channel;
   const state = useSendbirdStateContext();
   const currentUser = state?.config?.userId;

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;

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

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;
@@ -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>
                     )}
                   />
-                )
+                ) : <></>
               )}
             />
           ))}

src/modules/ChannelSettings/components/UserListItem/index.tsx

@@ -73,7 +73,7 @@ const UserListItem = ({
           renderUserProfile
             ? renderUserProfile({
               user,
-              currentUserId: currentUser,
+              currentUserId: currentUser ?? '',
               close: closeDropdown,
               avatarRef,
             })

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?.();
             }}
           />
         )

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">

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,19 @@ function CreateOpenChannelUI({
                   accept="image/gif, image/jpeg, image/png"
                   style={{ display: 'none' }}
                   onChange={(e) => {
-                    setCurrentImg(URL.createObjectURL(e.target.files[0]));
-                    setNewFile(e.target.files[0]);
-                    inputFileRef.current.value = '';
+                    if (e.target.files) {
+                      setCurrentImg(URL.createObjectURL(e.target.files[0]));
+                      setNewFile(e.target.files[0]);
+                    }
+
+                    if (inputFileRef.current) {
+                      inputFileRef.current.value = '';
+                    }
                   }}
                 />
                 <TextButton
                   className="sendbird-create-open-channel-ui__profile-input__img-section__button"
-                  onClick={() => inputFileRef.current.click()}
+                  onClick={() => inputFileRef.current?.click()}
                   disableUnderline
                 >
                   <Label

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 = '';
             }