I am getting an error when I try to access IDs. I attached the error message below. Could someone please help?

Code:

"use client";
import ChatComp from "@/components/chat";
import { Chat } from "@/API";
import { createChat } from "@/graphql/mutations";
import { chatsByChatroom } from "@/graphql/queries";
import { onCreateChat } from "@/graphql/subscriptions";
import { client } from "@/lib/client";
import { useEffect, useState } from "react";

interface PageProps {
params: {
chatroomId: string;
userId: string;
};
}

export default function Page({ params }: PageProps) {
const [chats, setChats] = useState<Chat[]>([]);
useEffect(() => {
client.graphql({
query: chatsByChatroom,
variables: {
chatroomId: params.chatroomId,
},
}).then((res) => {
setChats(res.data.chatsByChatroom.items);
});
});

return (
<div className="container max-w-screen-sm mt-20">
<ChatComp chats={chats.map((chat) => ({
...chat,
incoming: chat.sender !== params.userId,
}))}
/>
</div>
);
}