Hola (estoy aprendiendo React ), estoy trabajando con una API que devuelve imágenes de personas aleatorias, sin embargo, el problema que tengo es cuando uso axios.get, obtengo la respuesta de la API y puedo ver los resultados en la consola, pero cuando trato de acceder a ellos dice "No se pueden leer las propiedades de la imagen".

Lo que estoy haciendo es que cuando el usuario presiona el campo de entrada, obtiene una URL de una imagen aleatoria de la API y el valor de ese inputText cambia a la URL, pero dice "No se pueden leer las propiedades de la imagen" al hacer clic en el input, pero la API me devuelve los datos en la consola.

Esto es lo que me devuelve mi API.

Aquí está mi código.

 class PersonasInsert extends Component { urlPersonas = "https://randomuser.me/api/?inc=picture"; constructor(props) { super(props); this.state = { peticionImagen: null, name: "", last: "", image: "", }; } peticionImagenPersona = async () => { await axios.get(this.urlPersonas).then( (response) => { this.setState({ peticionImagen: response.data.results }); }, (error) => { console.log(error); } ); }; handleChangeImage = async (event) => { this.peticionImagenPersona(); const peticionImagen = this.state.peticionImagen.picture.large this.setState({ peticionImagen }); }; render() { const { peticionImagen } = this.state; return ( <Wrapper> <Title>Insertar Persona</Title> <Label>image: </Label> <InputText type="text" value={peticionImagen} readOnly onClick={this.handleChangeImage} /> </Wrapper> ); } } export default PersonasInsert;

Gracias de antemano.