Getting the error `Cannot read properties of undefined (reading ‘then’)`

I’m trying to use two separate map functions to loop through an array called quarterbacks and display their name and image inside a card. I had this code block working with just names in cards displaying the names as links that went to each individual player’s page. Now that I am trying to implement the images though it seems it’s not fetching the images the same way it did with just the names.

This is the code block that worked with just the names:

import { Link } from "react-router-dom";
import _navbar from "../../NavBar/navbar";
import React, { useEffect, useState } from "react";
import styles from "./card.module.css";

const quarterbacks = [3139477, 4241479, 3918298, 3915511, 2577417];
  const fetchFullName = async (id) => {
    const res = await fetch(
      `https://nfl-api-data.p.rapidapi.com/nfl-ath-fullinfo?id=${encodeURIComponent(id)}`,
      {
        headers: {
          "x-rapidapi-key": "secret key",
          "x-rapidapi-host": "nfl-api-data.p.rapidapi.com",
        },
      },
    );
    if (!res.ok) {
      throw new Error(`Name lookup for id '${id}' failed`);
    }
    return (await res.json()).athlete.fullName;

  };
  
  // returns an array of {id, name} objects
  const fetchFullNames = async (ids) =>
    Promise.all(ids.map(async (id) => ({ id, name: await fetchFullName(id) })));

  export default function _quarterbacksPage() {
    const [names, setNames] = useState([]);
  
    useEffect(() => {
      fetchFullNames(quarterbacks).then(setNames).catch(console.error);
    }, []);
  
    return (
      <>
        <_navbar />
          {names.map(({id, name }) => (
            <div className={styles.card} key={id}>   
              <Link className={styles.cardText} to={`/quarterback/${id}`}>
                    {name}
              </Link>
            </div>
          ))}
      </>
    );
  }

This is the code block that’s not working giving me the error:

import { Link } from "react-router-dom";
import _navbar from "../../NavBar/navbar";
import React, { useEffect, useState } from "react";
import styles from "./card.module.css";

const quarterbacks = [3139477, 4241479, 3918298, 3915511, 2577417];
  const fetchFullName = async (id) => {
    const res = await fetch(
      `https://nfl-api-data.p.rapidapi.com/nfl-ath-fullinfo?id=${encodeURIComponent(id)}`,
      {
        headers: {
          "x-rapidapi-key": "secret key",
          "x-rapidapi-host": "nfl-api-data.p.rapidapi.com",
        },
      },
    );
    if (!res.ok) {
      throw new Error(`Name lookup for id '${id}' failed`);
    }
    return (await res.json()).athlete.fullName;

  };
  
  // returns an array of {id, name} objects
  const fetchFullNames = async (ids) =>
    Promise.all(ids.map(async (id) => ({ id, name: await fetchFullName(id) })));


  const fetchImage = async (id) => {
    const res = await fetch(
      `https://nfl-api-data.p.rapidapi.com/nfl-ath-img?id=${encodeURIComponent(id)}`,
        {
          headers: {
            "x-rapidapi-key": "secret key",
            "x-rapidapi-host": "nfl-api-data.p.rapidapi.com",
          },
        },
      );
      if(!res.ok) {
        throw new Error(`Image lookup for id '${id}' failed`);
        
      }
      return (await res.json()).image.href;
    
  }
  const fetchImages = (ids) => {
    Promise.all(ids.map(async (id) => ({ image : await fetchImage(id)})));
  } 

  
  

  export default function _quarterbacksPage() {
    const [names, setNames] = useState([]);
    const [images, setImages] = useState([]);
  
    useEffect(() => {
      fetchFullNames(quarterbacks).then(setNames).catch(console.error);
      fetchImages(quarterbacks).then(setImages).catch(console.error);
    }, []);
  
    return (
      <>
        <_navbar />
          {names.map(({id, name }) => (
            <div className={styles.card} key={id}>   
              {images.map(({image}) => (             
                <img src={image} alt="player picture"/>
              ))}
              <Link className={styles.cardText} to={`/quarterback/${id}`}>
                    {name}
              </Link>
            </div>
          ))}
      </>
    );
  }