React app error due to undefined variable and incorrect data handling

.then((_data_) => setItemData(_data_))

import { useState, useEffect } from 'react';
import { NavLink, Link } from 'react-router-dom';
import './Home.css';
import sanityClient from '../client';

export default function Home() {
  const [itemData, setItemData] = useState(null);

  useEffect(() => {
    sanityClient
      .fetch(
        `*[_type == 'item']{
            title,
            slug,
            mainImage,
            game,
            category,
            publishedAt,
            caption
        }`
      )
      .then((data) => setItemData(data))
      .catch(console.error);
  });

  return (
    <div>
      <section className='intro flex align-items-flex-end justify-space-between'>
        <h1>
          Heading here
        </h1>
        <NavLink to='/items' className='btn btn--inverse'>
          View all
        </NavLink>
      </section>
      <section className='latest-items'>
        <div className='grid w-100'>
          <div className='card flex'>
            <Link to={'/items/' + item.slug.current} key={item.slug.current}>
              <div className='card__img'></div>
              <div className='card__title'>
                <h4>{item.title}</h4>
              </div>
            </Link>
            <div className='card__filters flex'>
              <a href='' className='game'>
                {item.game}
              </a>
              <a href='' className='category'>
                {item.category}
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}