Pokémon Fetcher

Objective: Fetch and display Pokémon data using React.

Instructions:

1. Create a React component named PokemonFetcher.

2. The component should fetch data from the Pokémon API: https://pokeapi.co/api/v2/pokemon/ditto.

3. Display the Pokémon’s name inside an <h1> tag.

4. Display an image of the Pokémon using the <img> tag. Use the sprites.front_default field from the API response for the image URL.

Requirements:

• Use the useEffect hook to fetch data from the API when the component mounts.
• Use the useState hook to manage the following states:
  • Fetched Pokémon data.
  • Loading status (optional)
  • Error handling for failed API calls (optional)

Hints:

1. Use fetch to retrieve the Pokémon data.
2. Handle different states:
   • Loading (while waiting for the data).
   • Success (once the data is fetched).
   • Error (if something goes wrong).

Bonus:

• Display a loading message or spinner while the data is being fetched.
• Style the component to make it look good.