How to get data from API “PokeAPI”

I have React component :

import React from "react";
import { Pokemons } from "../Pokemons";

class Main extends React.Component {
  state = {
    pokemons: [],
  };

  componentDidMount() {
    fetch("https://pokeapi.co/api/v2/pokemon?limit=20")
      .then((responce) => responce.json())
      .then((data) => this.setState({ pokemons: Object.values(data) }));
  }

  render() {
    return (
      <main className="container content">
        <Pokemons pokemon={this.state.pokemons} />
      </main>
    );
  }
}

export { Main };

The API I’m using is PokeAPI

My task is to display data about the first 20 Pokémon (which is what I’m trying to do in fetch() ). But I don’t get exactly what I need:

Console information.png

That is, JSON with four elements comes in response, the one I need is in the last one ( 3: ):

Console information 2.png

**In addition, each of the twenty objects (Pokémon) has a name and a link: **

Console Information 3.png

From this I need only the name, the rest of the necessary information (type, height, sprite) are data on these links. Example data in the link:

Data from link.png

In fact, the name of the pokemon is also in the data contained in these links.

I have never come across such an API structure before =(

Question – Help me get the name, type, sprite, height and weight of the Pokémon…