How to fetch data from referenced document? Sanity/react

Here is my sanity schema for my categories:

export default {
name: 'category',
type: 'document',
title: 'Category',
fields: [
    {
        name: 'contained_sets',
        type: 'array',
        title: 'Contained Sets',
        of: [{
            type: 'reference',
            to: [{type: 'set'}] 
        }]
    }
]}

Which references a list of sets, the scheme being this:

export default {
name: 'set',
type: 'document',
title: 'Set',
fields: [
    {
        name: 'set_name',
        type: 'string',
        title: 'Set Name',
    },
    {
        name: 'set_images',
        type: 'array',
        title: 'Set Images',
        of: [
            {
                name: 'image',
                type: 'image',
                title: 'Image',
                options: {
                    hotspot: true,
                },
                fields: [
                    {
                        name: 'alt',
                        type: 'string',
                        title: 'Alternative Text',
                        options: {
                            isHighlighted: true
                        }
                    },
                    {
                        name: 'name',
                        type: 'string',
                        title: 'Name',
                        options: {
                            isHighlighted: true
                        }
                    },
                    {
                        name: 'date',
                        type: 'string',
                        title: 'Date',
                        options: {
                            isHighlighted: true
                        }
                    },
                    {
                        name: 'size',
                        type: 'string',
                        title: 'Size',
                        options: {
                            isHighlighted: true
                        }
                    },
                    {
                        name: 'materials',
                        type: 'string',
                        title: 'Materials',
                        options: {
                            isHighlighted: true
                        }
                    },
                ]
            },
        ]
    },
    {
        name: 'slug',
        title: 'Slug',
        type: 'slug',
        options: {
            source: 'set_name'
        }
    }
]
}

I have a gallery page that currently shows all of the categories. When you click on a category, the user should be directed to another page with new options that shows their unique sets (which can be further clicked to see their individual galleries, but one step at a time). E.g., category: sketch = 'set a', 'set b', 'set c'; category: painting = 'set a, set b, 'set f', 'set g').

I've tried three different ways to query them: attempt 1: (gets client error)

 const [setData, setSetData] = useState(null);
  
  useEffect(() => {
    client.fetch(
      `*[_type == "category" && references(*[_type == "set"]._id)]{
        set_name, set_images[]-> {image{asset->_id, url}}
      }`
    ).then((data) => setSetData(data))
    .catch(err => console.error(err)) 
  }, [])

attempt 2: (no errors)

const [setData, setSetData] = useState(null);

useEffect(() => {
    client.fetch(
      `content[]{
        _type == 'category' => {
          contained_sets,
        },
        _type == 'set' => {
          image{
            asset->{
              _id,
              url
            }
          },
          alt,
          "url": File.asset->url
        }
      }`
    ).then((data) => setSetData(data))
    .catch(err => console.error(err))
  }, []);

attempt 3: (gets urlFor error)

const [categoryData, setCategories] = useState(null);

useEffect(() => {
client.fetch(
    `*[_type=="category"]{
      category_name,
        contained_sets[]->{set_name, image{asset->{_id, url}}}
    }`)
    .then((data) => setCategories(data))
    .catch(err => console.error(err));
  }, [] );

I think its attempt 2 that works... but no matter what I do, I can't get any of the data to show. Here is an example of how I try to query them:

<ul className="categories-container">
              {setData && setData.map((set, index) => (
                  <li key={index}>
                      <img src={urlFor(set.image).auto('format').url()} alt={set.alt}/>
                      <span>{set.set_name}</span>
                  </li>
              ))}
            </ul>