Why the data i get from the useQuery it's undefined on the first render?

import { api } from "../lib/axios";
import type { Todo } from "../types/users";

export async function getTodos() {
    const response = await api.get<Todo[]>('/todos')
    
    return response.data
}

import { api } from "../lib/axios";
import type { Todo } from "../types/users";

export async function getTodos() {
    const response = await api.get<Todo[]>('/todos')
    
    return response.data
}

const { data:todosData } = useQuery({
    queryKey: ['todos'],
    queryFn: () => getTodos(),         
})

console.log(todosData.value, 'todosData value')
/\ this come as undefined 

const { data:todosData } = useQuery({
    queryKey: ['todos'],
    queryFn: () => getTodos(),         
})

console.log(todosData.value, 'todosData value')
/\ this come as undefined