displaying only one entry with useQuery

I'm trying to just display one value from a query and I'm wondering why the first snippet of code does not display the name while the other one does

this one does not work:

const EXCHANGE_RATES = gql`  query {    profiles (limit: 1){        id        name  }}`;export const ExchangeRates: React.FC<ExchangeRatesProps> = () => {    const { loading, error, data } = useQuery(EXCHANGE_RATES);    if (loading) return <Text>Loading...</Text>;    if (error) return <Text>Error :(</Text>;    return  (<View ><Text>                {data.profiles.name}</Text></View>    );}

but this one does:

export const EXCHANGE_RATES = gql`  query {    profiles (limit: 1){        id        name  }}`;export const ExchangeRates: React.FC<ExchangeRatesProps> = () => {    const { loading, error, data } = useQuery(EXCHANGE_RATES);    if (loading) return <Text>Loading...</Text>;    if (error) return <Text>Error :(</Text>;    return data.profiles.map(({ id, name} : {id:number, name:string}) => (<View ><Text>                {id} : {name}</Text></View>    ));}