what would be the best way to get data from an API (https://nba-players.herokuapp.com/players-stats-teams/lal), run a function on it and save results, then use that data to call a different API endpoint (e.g. https://nba-players.herokuapp.com/players/curry/stephen)? To be more specific, I'm trying to display an image of each player in an Avatar component using the first and last name of each player (full name obtained from API call in App.js, so I would have to split and store (hook? object?) into first and last name). I map through each player in App.js. I note the API itself is pretty basic. Also dealing with 2 API calls in react

Thank you

App.js: 
 
import React, { useEffect, useState } from "react";
import axios from "axios";
import Card from "./Card";


function App() {
  const [data, setData] = useState([]);
  const team = "lal";
  const url = "https://nba-players.herokuapp.com/players-stats-teams/" + team;

  const getData = async () => {
    try {
      const teamPlayersData = await axios.get(url);
      setData(teamPlayersData.data); 
    } catch (err) {
      console.error(err.message);
    }
  };

  useEffect(() => {
    getData();
  }, []); 

  return (
    <div>
      {data.map((player, index) => (
        <Card
          key={index}
          name={player.name}
          img={getImage(player)} QQQ THIS PART 
          team={player.team_name}
          rating={player.player_efficiency_rating}
        />
      ))}
    </div>
  );
}

export default App;

Card.js

import React from "react";
import Avatar from "./Avatar";

function Card(props) {
  return (
    <div className="card">
      <li>{props.name}</li>
      <Avatar img={props.img} /> QQQ
      <li>{props.team}</li>
      <li>{props.rating}</li>
    </div>
  );
}

export default Card; 

Avatar.js
*call different API endpoint here to retrieve image, run function to split full name into first and last name in this file? 

function Avatar(props) {
  return <img src={props.img} alt="avatar_img" />;
}

export default Avatar;