useQuery - select return undefined data

import { useQuery } from "@tanstack/react-query"

import axios from "@/config/axios"
import { Chat, IGiftedChat } from "../utils/types"

const useGetChat = (id: string) => {
    const query = useQuery({
        queryKey: ["chat", id],
        queryFn: async () => {
            const response = await axios.get<Chat>(`/chats/${id}`)
            return response.data
        },
        select: (data): IGiftedChat => {
            return {
                id: data.id,
                user: data.contact,
                messages: data.messages.map((message) => ({
                    _id: data.id,
                    text: message.content,
                    createdAt: new Date(message.updatedAt),
                    user: {
                        _id: data.contact.id,
                        name: data.contact.firstname,
                        avatar: data.contact.avatar ?? undefined,
                    },
                })),
            }
        },
    })

    return query
}

export default useGetChat

const { data, isLoading } = useGetChat(params?.id as string)