Display an Array Data Referencing a Category Array with Sanity and Next.js

Question

I'm trying to have a Category array display on the frontend with items that reference the Category below it.

I've been able to render the category titles on the page, but not the items with references to that category by doing:

export default function Menu({data}) {
  const {category} = data;
  return (

  <section>
    {category?.length > 0 &&
      category
        .map((category) => (
          <article key={category._id}>
            {category?.title && 
            <h1 className="text-3xl">{category.title}</h1>}
        ))}
  </section>

export async function getStaticProps() {

const category = await client
  .fetch(
    `*[_type == "category"] {
      title,
      "menuItems": *[_type == "menuItem" && references(^._id)] {
        title,
        description,
        price,
        ...
      }
    }
  `);
return {
    props: {
      data: { category }
    },
  }
}

I've been trying to use .map to find and return the reference data ...

Here are the Sanity schemas I have for Category and menuItem

for Category:

export default {
    name: 'category',
    title: 'Category',
    type: 'document',
    fields: [
      {
        name: 'title',
        title: 'Title',
        type: 'string',
      },
    ],
  };

for menuItem: 

export default {
    name: 'menuItem',
    title: 'Menu Item',
    type: 'document',
    fields: [
      {
        name: 'title',
        title: 'Title',
        type: 'string',
      },
      {
        name: 'category',
        title: 'Category',
        type: 'reference',
        to: [{ type: 'category' }],
      },
      {
        name: 'price',
        title: 'Price',
        type: 'number',
      },
      {
        name: 'description',
        title: 'Description',
        type: 'string',
      },
    ],
  };

I know I'm doing something wrong, but can't sort it out. Can anyone help? Thank you so much