Headless UI Tab with Tailwind how to make Tab an image with an aspect ratio of square?

Question

Building a product gallery with HeadlessUI's Tab I'm having an issue when resizing the browser my tabbed images will not perserve the assigned aspect ratio aspect-square and the tab requires a numerical value for height or it will not render:

Headlessui Tab

<Tab
  key={id}
  className="group relative flex h-24 cursor-pointer items-center justify-center hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4 ring-primary-50"
>
content
</Tab>

Full Code

import Image from 'next/image'
import {Tab, TabGroup, TabList, TabPanel, TabPanels} from '@headlessui/react'

interface ImageProps {
  id: number | string
  name: string
  src: string
  alt: string
}

interface Props {
  images: ImageProps[]
}

export default function ProductGallery({images}: Readonly<Props>) {
  return (
    <TabGroup className="flex flex-col-reverse">
      <div className="mx-auto mt-6 px-4 md:px-0 w-full max-w-2xl sm:block lg:max-w-none">
        <TabList className="grid grid-cols-4 gap-6">
          {images.map(({id, name, alt, src}) => (
            <Tab
              key={id}
              className="group relative flex h-24 cursor-pointer items-center justify-center hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4 ring-primary-50"
            >
              <span className="sr-only">{name}</span>
              <span className="absolute inset-0 overflow-hidden">
                <Image
                  width={592}
                  height={592}
                  alt={alt || 'Gallery Image'}
                  src={src}
                  className="h-full object-cover object-center aspect-square"
                />
              </span>
              <span
                aria-hidden="true"
                className="pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-[selected]:ring-primary-500"
              />
            </Tab>
          ))}
        </TabList>
      </div>
      <TabPanels className="aspect-h-1 aspect-w-1 w-full">
        {images.map(({id, alt, src}) => (
          <TabPanel key={id}>
            <Image
              width={592}
              height={592}
              alt={alt}
              src={src}
              className="h-full w-full object-cover object-center"
            />
          </TabPanel>
        ))}
      </TabPanels>
    </TabGroup>
  )
}

Mock Data

[
  {
    id: 1,
    name: 'Angled view',
    src: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg',
    alt: 'Angled front view with bag zipped and handles upright.'
  },
  {
    id: 2,
    name: 'Front view',
    src: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-02-tertiary-product-shot-02.jpg',
    alt: 'Front view with bag zipped and handles upright.'
  },
  {
    id: 3,
    name: 'Front view',
    src: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-02-featured-product-shot.jpg',
    alt: 'Front view with bag zipped and handles upright.'
  },
  {
    id: 4,
    name: 'Over view',
    src: 'https://tailwindui.com/plus/img/ecommerce-images/product-page-02-secondary-product-shot.jpg',
    alt: 'Over view with bag zipped and handles upright.'
  }
]

Research

• Dialog height with a dynamic text area
• Dialog (Modal) with fixed height/width and scrollable content
• Let us programmatically set the current Tab (or better yet expose the context)
• Menu.Items with max height & keyboard navigation
• How to make HeadlessUI Popover behave correctly within a React portal?
• HeadlessUI Tabs active tabs gets back to 0 after refresh

In a HeadlessUI Tab how can I force a Tab to have an aspect ratio of square?