React: I believe I have a GOTCHA for a double async fetch call. I click the button once part of the setState renders I click again and then it renders

Question:

I am developing a small app that is a memory game of Formula One Drivers to practice React. It makes a call to an API to get the driver info then I have to make a second API call to Wikipedia to get the driver images. When I submit the year and click the button it will only load half the information Image 1 & getDrivers function. When I click the button again it will load the images Image 2 & getDriversImgs function / retrievingImgUrl.

I believe I am encountering a GOTCHA or doing something fundamentally wrong. I am not sure in my setDrivers call in the retrievingImgUrl() function if it isn't updating because it is a reference to an array even though I use map and it should be returning a new array?

Or is this something where I need to use useEffect or useCallback to have the code rerender in one go?

Any advice on how to fix the bug and if you could point me in a direction to possibly clean up these fetch calls or would you consider this clean code (like conceptually chaining fetch calls together in smaller functions or should I make it one big function)?

import { Fragment, useState, useEffect } from "react";

// Components
import Header from "./components/header/Header";
import CardList from "./components/main/CardList";
import Modal from "./components/UI/Modal";

// CSS
import classes from "./App.module.css";

function App() {
  const [drivers, setDrivers] = useState([]);

  const getDrivers = async (year) => {
    const response = await fetch(
      "https://ergast.com/api/f1/" + year + "/drivers.json"
    );
    const data = await response.json();

    let driverInfo = [];
    data.MRData.DriverTable.Drivers.map((driver) => {
      driverInfo.push({
        id: driver.code,
        firstName: driver.givenName,
        lastName: driver.familyName,
        wikipedia: driver.url,
        image: null,
      });
    });
    setDrivers(driverInfo);
    getDriversImgs();
  };

  async function getDriversImgs() {
    console.log(drivers);
    const responses = await Promise.all(
      drivers.map((driver) => {
        let wikiPageName = driver.wikipedia.split("/").slice(-1).toString();
        let wiki_url =
          "https://en.wikipedia.org/w/api.php?origin=*&action=query&titles=" +
          wikiPageName +
          "&prop=pageimages&format=json&pithumbsize=500";
        return fetch(wiki_url);
      })
    );
    const urls = await Promise.all(responses.map((r) => r.json())).then(
      (json) => retrievingImgUrl(json)
    );
    setDrivers((prev) => {
      return prev.map((item, idx) => {
        return { ...item, image: urls[idx] };
      });
    });
  }

  const retrievingImgUrl = async (data) => {
    console.log(data);
    const strippingData = data.map((d) => {
      return d.query.pages;
    });
    const urls = strippingData.map((d) => {
      const k = Object.keys(d)[0];
      try {
        return d[k].thumbnail.source;
      } catch {
        return null;
      }
    });
    return urls;
  };


  return (
    <Fragment>
      <Header getDrivers={getDrivers} />
      <CardList drivers={drivers} />
    </Fragment>
  );
}

export default App; 

Image 1 (clicked button once):

Image 2 (clicked button twice):

Object20Object error:

const Header = (props) => {
  const driverYear = useRef();

  const driverYearHandler = (e) => {
    e.preventDefault();
    console.log(driverYear);
    const year = driverYear.current.value;
    console.log(typeof year);
    props.getDrivers(year.toString());
  };

  return (
    <header className={classes.header}>
      <Title />
      <form onSubmit={driverYearHandler}>
        {/* <label htmlFor="year">Enter Year:</label> */}
        <input
          type="text"
          id="year"
          ref={driverYear}
          placeholder="Enter Year:"
        />
        <button onClick={props.getDrivers}>Get Drivers</button>
      </form>
    </header>
  );
};

export default Header;

Console Error:

UPDATED FETCH CALL

const getDrivers = async (year) => {
    console.log("Running more than once??");
    const url = "https://ergast.com/api/f1/" + year + "/drivers.json";
    const response = await fetch(url);
    const data = await response.json();

    let driverInfo = [];
    data.MRData.DriverTable.Drivers.map((driver) => {
      driverInfo.push({
        id: driver.code,
        firstName: driver.givenName,
        lastName: driver.familyName,
        wikipedia: driver.url,
        image: null,
      });
    });
    getDriversImgs(driverInfo).then((data) => setDrivers(data));
    console.log("Here is driver info", driverInfo);
  };

  const getDriversImgs = async (driverInfo) => {
    const responses = await Promise.all(
      driverInfo.map((driver) => {
        let wikiPageName = driver.wikipedia.split("/").slice(-1).toString();
        let wiki_url =
          "https://en.wikipedia.org/w/api.php?origin=*&action=query&titles=" +
          wikiPageName +
          "&prop=pageimages&format=json&pithumbsize=500";
        return fetch(wiki_url);
      })
    );
    const urls = await Promise.all(responses.map((r) => r.json())).then(
      (json) => retrievingImgUrl(json)
    );
    return driverInfo.map((item, idx) => {
      return { ...item, image: urls[idx] };
    });
  };

  const retrievingImgUrl = async (data) => {
    const strippingData = data.map((d) => {
      return d.query.pages;
    });
    const urls = strippingData.map((d) => {
      const k = Object.keys(d)[0];
      try {
        return d[k].thumbnail.source;
      } catch {
        return null;
      }
    });
    return urls;
  };