I am new in react JS technology , and I got a assignment from my job to display Pokemon name and image , I displayed name but I am Failed with displaying image of Pokemon, Can anyone help me to display image of pokemon. I f you have any query regarding my question please free feel to ask me.

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;