Soy nuevo en la tecnología de reacción JS, y recibí una tarea de mi trabajo para mostrar el nombre y la imagen de Pokémon, mostré el nombre pero no pude mostrar la imagen de Pokémon. ¿Alguien puede ayudarme a mostrar la imagen de Pokémon? Si tiene alguna consulta con respecto a mi pregunta, no dude en preguntarme.

 import React, { useEffect, useState } from "react"; import Axios from "axios"; const Pokemonapi = () => { const [text, setText] = useState(""); const [data, setData] = useState([]); const Search = () => { if (text == "") { alert("Please Enter a name to be search"); } else { searchPokemon(); setText(""); } }; const searchPokemon = async () => { const response = await Axios.get( `https://pokeapi.co/api/v2/pokemon/${text}` ); // const getdata = await response.json(); setData(response.data.results); console.log(response); }; useEffect(() => { searchPokemon(); }, []); return ( <div> <div className="container-fluid jumbotron"> <div className="input-group mb-3"> <input type="text" className="form-control shadow-none" placeholder="Search Pokemon" value={text} onChange={(e) => setText(e.target.value)} /> <div className="input-group-append"> <span className="input-group-text" id="basic-addon2" onClick={Search} > Search </span> </div> </div> </div> {data.map((dat, index) => { return ( <div key={index}> <h2>{dat.name}</h2> <img src={dat.sprites.other.dream_world.front_default} /> </div> ); })} </div> ); }; export default Pokemonapi;