Undefined is not an object (...) react native

Question

I have a problem with React-Native. I want to show data from Django to React-Native, but I can't show one data, this is the code:

import React, { useState, useEffect } from "react";
import { StyleSheet, View, Text, Image, FlatList } from "react-native";
import client from "./../../api/client";


const DetailView = ({navigation, route}) => {
  const [detail, setDetail] = useState("");
  const { objurl } = route.params;

  const getDetail = async (url) => {
    try {
      const response = await client.get(url);
      if (!response.ok) {
        setDetail(response.data);
      }
    } catch (error) {
      console.log(error);
    }
  };
  
  useEffect(()=>{ getDetail(objurl); }, [])

  console.log(detail.habilidad_usuario.nombre_habilidad);

  return (
      <View style={styles.center}>
        <Image
        style={styles.usuarioImage}
        source={{
          uri: detail.foto_usuario,
        }}
      />
        <Text style={styles.name}>{detail.nombre_usuario} {detail.apellido_usuario}</Text>
        <Text style={styles.name}>{detail.habilidad_usuario.nombre_habilidad}</Text>
        <Text style={styles.description}>{detail.descripcion_usuario} </Text>
        <Text style={styles.body}>Dirección: {detail.direccion_usuario}  </Text>
        <Text style={styles.body}>Celular: {detail.id_usuario} </Text>
        <FlatList
        data={detail.usuario_comentado}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => {
          return (
            <Text style={styles.body}>Comentario: {item.contenido_comentario} </Text>
          );
        }}
        />
        

      </View>
    );
  }

The problem is in the line:

<Text style={styles.name}>{detail.habilidad_usuario.nombre_habilidad}</Text>

and It's the result:

enter image description here

The others data is rendering very well.

The data from Django Rest is: enter image description here