diff --git a/client/shared/redux/hooks/useDMConverseName.ts b/client/shared/redux/hooks/useDMConverseName.ts
index 6abfd549..2f69d3e6 100644
--- a/client/shared/redux/hooks/useDMConverseName.ts
+++ b/client/shared/redux/hooks/useDMConverseName.ts
@@ -4,16 +4,20 @@ import type { ChatConverseState } from '../slices/chat';
 import { useUserId } from './useUserInfo';
 import type { FriendInfo } from '../slices/user';
 
-export function useDMConverseName(converse: ChatConverseState) {
+export function useDMConverseName(converse: ChatConverseState | undefined) {
   const userId = useUserId();
   const friends: FriendInfo[] = useAppSelector((state) => state.user.friends);
   const { value: name = '' } = useAsync(async () => {
+    if (!converse) {
+      return '';
+    }
+
     if (!isValidStr(userId)) {
       return '';
     }
 
     return getDMConverseName(userId, converse);
-  }, [userId, converse.name, converse.members.join(','), friends]);
+  }, [userId, converse?.name, converse?.members.join(','), friends]);
 
   return name;
 }
diff --git a/client/web/src/components/ConverseName.tsx b/client/web/src/components/ConverseName.tsx
index 28a0ec4a..2167e3f8 100644
--- a/client/web/src/components/ConverseName.tsx
+++ b/client/web/src/components/ConverseName.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { useAppSelector, useDMConverseName } from 'tailchat-shared';
+import {
+  ChatConverseState,
+  useAppSelector,
+  useDMConverseName,
+} from 'tailchat-shared';
 
 interface ConverseNameProps {
   converseId: string;
@@ -9,7 +13,9 @@ interface ConverseNameProps {
 
 export const ConverseName: React.FC<ConverseNameProps> = React.memo((props) => {
   const { converseId, className, style } = props;
-  const converse = useAppSelector((state) => state.chat.converses[converseId]);
+  const converse = useAppSelector<ChatConverseState | undefined>(
+    (state) => state.chat.converses[converseId]
+  );
   const converseName = useDMConverseName(converse);
 
   return (