How to manage dependents async await in ReactJS?

Question

I'm still new to ReactJS and I'm having trouble doing an asyn await with dependencies from another request on axios.

I need to get a list of pokemon, this list returns me the name of pokemons.

With this list of names, I need to make another request, where I will pass this name that I received as a parameter.

In addition to passing the name as a parameter, I need to make a call with axios.get() using .map(). Because there are several calls I need to make. It is possible?

However, I am not able to do that. Can you tell me what I'm doing wrong?

Here's my code I put into codesandbox.io

import React from "react";
import axios from "axios";
import "./styles.css";

const App = () => {
  const BASE_URL = "https://pokeapi.co/api/v2";

  const getAllPokemons = async () => {
    const { data } = await axios.get(`${BASE_URL}/pokemon`);

    // Here is my pokemon list
    console.log(data);

    data.results.map((poke) => getPokeType(poke));
  };

  const getPokeType = async (poke) => {
    const { data } = await axios.get(`${BASE_URL}/type/${poke.name}`);

    console.log("data: ", data);
  };

  React.useEffect(() => {
    getAllPokemons();
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
};

export default App;

Thank you very much in advance.