Я получаю сообщение об ошибке «ReferenceError: useState не определено»

Компилятор инструментов разработчика в настоящее время выдает мне эту ошибку:

ReferenceError: useState is not defined

С помощью этого блока кода я пытаюсь получить имена и изображения нескольких игроков из API НФЛ. Затем отобразите эту информацию в виде карточек, по которым люди могут щелкнуть по имени и перейти на страницу каждого отдельного игрока.

Это код компонента, с которым я работаю:

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

export default function _quarterbacksPage() {
    const quarterbacks = [3139477, 4241479, 3918298, 3915511, 2577417];

    const options = {
        method: 'GET',
        headers: {
            'x-rapidapi-key': 'secretkey',
            'x-rapidapi-host': 'nfl-api-data.p.rapidapi.com'
        }
    };
    for (let i = 0; i < quarterbacks.length; i++){
            const [img, setImg] = useState();
            const [name, setName] = useState();
    
        
            const imageUrl = "https://nfl-api-data.p.rapidapi.com/nfl-ath-img?id = " + quarterbacks[i];
            const fetchImage = async () => {
            fetch(imageUrl, options)
            .then(response => response.json())
            .then(response => {
                const data = response.image.href;
                new Blob([data], {type: 'image/png' });  
                setImg(data);
                
            })
          };
    
    
            const FullNameUrl = 'https://nfl-api-data.p.rapidapi.com/nfl-ath-fullinfo?id=' + quarterbacks[i];
            const fetchFullName = async () => {
                fetch(FullNameUrl, options)
                .then(response => response.json())
                .then(response => {
                    const data = response.athlete.fullName;
                    setName(data);
                
                })
            };
    
        useEffect(() => {
            fetchImage();
            fetchFullName();
        }, []);
    }


    return (
        <>
            <div>
                <_navbar />
                {quarterbacks.map((quarterback) => (
                    <>
                        <img className = {styles.cardImage} src = {img} alt = "profile picture"></img>
                        <Link key = {quarterback} to = {`/quarterbacks/${quarterback}`}>
                            <h2 className = {styles.cardTitle}>{name}</h2>
                        </Link>
                    </>
                ))}
            
            </div>
        </>
    );
}

Этот блок кода я использовал для всех своих маршрутов:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

import AnalyticsNow from'./pages/analyticsNow.jsx';
import _quarterbackPage from './pages/quarterback.jsx';
import _quarterbacksPage from './pages/quarterbacks.jsx';
import _runningbackPage from './pages/runningback.jsx';
import _runningbacksPage from './pages/runningbacks.jsx';
import _defensePage from './pages/defense.jsx';
import _defensesPage from './pages/defenses.jsx';
import _specialTeamsPage from './pages/specialteams.jsx';
import _SpecialTeamPage from './pages/specialteam.jsx';
import _tightendPage from './pages/tightend.jsx';
import _tightendsPage from './pages/tightends.jsx';
import _widereceiverPage from './pages/widereceiver.jsx';
import _widereceiversPage from './pages/widereceivers.jsx';
import _notFoundPage from './pages/notFound.jsx';


import './index.css'

const router = createBrowserRouter([{
  path: '/',
  element: <AnalyticsNow />,
  errorElement: <_notFoundPage />
  },
  {
    path: '/quarterbacks',
    element: <_quarterbacksPage />

  },
  {
    path: '/quarterbacks/:quarterbackId',
    element: <_quarterbackPage />,
  },
  {
    path: '/runningbacks',
    element: <_runningbacksPage />

  },
  {
    path: '/runningbacks/:runningbackId',
    element: <_runningbackPage />,
  },
  {
    path: '/defenses',
    element: <_defensesPage />

  },
  {
    path: '/defenses/:defenseId',
    element: <_defensePage />,
  },
  {
    path: '/specialteams',
    element: <_specialTeamsPage />

  },
  {
    path: '/specialteams/:specialteamId',
    element: <_SpecialTeamPage />,
  },
  {
    path: '/tightends',
    element: <_tightendsPage />

  },
  {
    path: '/tightends/:tightendId',
    element: <_tightendPage />,
  },
  {
    path: '/widereceivers',
    element: <_widereceiversPage />

  },
  {
    path: '/widereceivers/:widereceiverId',
    element: <_widereceiverPage />,
  },

]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router = {router} />
  </React.StrictMode>,
)

Код работал без ошибок, когда отображалась одна карта:

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


export default function _quarterbacksPage() {

     const options = {
        method: 'GET',
           headers: {
             'x-rapidapi-key': 'secretkey',
             'x-rapidapi-host': 'nfl-api-data.p.rapidapi.com'
            }
       };
     const [img, setImg] = useState();
     const [name, setName] = useState();
    
        
     const imageUrl = "https://nfl-api-data.p.rapidapi.com/nfl-ath-img?id=3139477";
            const fetchImage = async () => {
            fetch(imageUrl, options)
            .then(response => response.json())
            .then(response => {
                const data = response.image.href;
                new Blob([data], {type: 'image/png' });  
                setImg(data);
                
            })
          };
    
    
            const FullNameUrl = 'https://nfl-api-data.p.rapidapi.com/nfl-ath-fullinfo?id=3139477';
            const fetchFullName = async () => {
                fetch(FullNameUrl, options)
                .then(response => response.json())
                .then(response => {
                    const data = response.athlete.fullName;
                    setName(data);
                
                })
            };
    
        useEffect(() => {
            fetchImage();
            fetchFullName();
        }, []);


    return (
        <>
            <div>
                <_navbar />
                
                <img className = {styles.cardImage} src = {img} alt = "profile picture"></img>
                <h2 className = {styles.cardTitle}>{name</h2>
                                                      
            </div>
        </>
    );
}