Using Filter does not work with ids as string?

export default function App() {
  return (
    <Router>
      <ChatroomSelect />
      <Routes>
        <Route path="/chatrooms/:chatroomId" element={<ChatroomPage />}>
        </Route>
      </Routes>
    </Router>
  );
}

export default function App() {
  return (
    <Router>
      <ChatroomSelect />
      <Routes>
        <Route path="/chatrooms/:chatroomId" element={<ChatroomPage />}>
        </Route>
      </Routes>
    </Router>
  );
}

export default function ChatroomPage() {
  type ChatroomParams = {
    chatroomId: string;
  };

  const { chatroomId } = useParams<ChatroomParams>();

  if (!chatroomId) {
    throw new Error("No chatroom ID provided");
  }

  const chatroom = useQuery(api.chatrooms.getChatroom, {
    chatroomId: chatroomId,
  });

  if (!chatroom) {
    throw new Error("Chatroom not found");
  }

  const messages =
    useQuery(api.messages.list, { chatroomId: chatroom.chatroomId }) || [];

  return (
    <main>
      <h1>{chatroom.creator}</h1>
      <Badge />
      <h2>
        <SignOutButton />
      </h2>
      <div className="messageBox">
        {messages.map((message) => (
          <Message
            key={message._id.toString()}
            id={message._id}
            sender={message.sender}
            content={message.content}
            sentAt={new Date(message._creationTime)}
            likes={message.likes}
          />
        ))}
      </div>
      <SendMessage chatroomId={chatroom.chatroomId} />
    </main>
  );
}

export default function ChatroomPage() {
  type ChatroomParams = {
    chatroomId: string;
  };

  const { chatroomId } = useParams<ChatroomParams>();

  if (!chatroomId) {
    throw new Error("No chatroom ID provided");
  }

  const chatroom = useQuery(api.chatrooms.getChatroom, {
    chatroomId: chatroomId,
  });

  if (!chatroom) {
    throw new Error("Chatroom not found");
  }

  const messages =
    useQuery(api.messages.list, { chatroomId: chatroom.chatroomId }) || [];

  return (
    <main>
      <h1>{chatroom.creator}</h1>
      <Badge />
      <h2>
        <SignOutButton />
      </h2>
      <div className="messageBox">
        {messages.map((message) => (
          <Message
            key={message._id.toString()}
            id={message._id}
            sender={message.sender}
            content={message.content}
            sentAt={new Date(message._creationTime)}
            likes={message.likes}
          />
        ))}
      </div>
      <SendMessage chatroomId={chatroom.chatroomId} />
    </main>
  );
}