Why am I unable to achieve the desired aspect-ratio using TailwindCSS?

Question

I am trying to achieve an 1:1 aspect ratio for the React component EventPreview under the parent component EventPreviewCarousel using TailwindCSS.

From TailwindCSS' official docs:

The aspect-{ratio} utilities use the native aspect-ratio CSS property, which was not supported in Safari until version 15. Until Safari 15 is popularized, Tailwind’s aspect-ratio plugin is a good alternative.

I'll further quote the docs for @tailwindcss/aspect-ratio:

Note that due to the way this currently needs to be implemented (the old padding-bottom trick) you need to assign the aspect ratio to a parent element, and make the actual element you are trying to size the only child of that parent.

I installed @tailwind/aspect-ratio and below is my code after the necessary revisions:

tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme")

module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        fontSize: {
            ...defaultTheme.fontSize,
            base: "0.9375rem",
        },
        fontFamily: {
            sans: ["Archivo", ...defaultTheme.fontFamily.sans],
            serif: ["Lora", ...defaultTheme.fontFamily.serif],
            "ev-p-d": ["Quantico"],
            "ev-p-n": ["Epilogue"],
            "tl-ev-y": ["Cabin"],
        },
        aspectRatio: {
            auto: "auto",
            square: "1 / 1",
            video: "16 / 9",
            1: "1",
            2: "2",
            3: "3",
            4: "4",
            5: "5",
            6: "6",
            7: "7",
            8: "8",
            9: "9",
            10: "10",
            11: "11",
            12: "12",
            13: "13",
            14: "14",
            15: "15",
            16: "16",
        },
        extend: {
            colors: {
                primary: "#0066FF",
            },
        },
    },
    corePlugins: {
        aspectRatio: false,
    },
    plugins: [
        require("@tailwindcss/aspect-ratio")
    ]
}

EventPreview.js

const EventPreview = (props) => {
    const formattingOptions = {
        year: "numeric",
        month: "short",
        day: "2-digit"
    }

    const formattedDate = props.date.toLocaleDateString("en-US", formattingOptions)

    return (
        <div className="w-3/4 aspect-square">
            <div
                className={`${props.className} grid grid-cols-1 content-between p-3 bg-gradient-to-b from-gray-50 to-gray-200 rounded border border-gray-400`}
            >
                <div className="flex justify-between items-center">
                    <span className="font-ev-p-d text-sm">{props.category}</span>
                    <span className="font-ev-p-d text-sm">{formattedDate}</span>
                </div>

                <span className="font-ev-p-n lowercase leading-tight">
                    {props.name}
                </span>
            </div>
        </div>
    )
}

export default EventPreview

EventPreviewCarousel.js

import Carousel from "../UI/Carousel"
import EventPreview from './EventPreview'

const EventPreviewCarousel = props => {
    const carouselOptions = {
        cellAlign: "left",
        contain: true,
        selectedAttraction: 0.2,
        friction: 0.8
    }

    return (
        <Carousel options={carouselOptions}>
            {props.events.map(event => {
                return <EventPreview
                    className="mr-6"
                    key={event.id}
                    name={event.name}
                    date={event.date}
                    category={event.category}
                />
            })}
        </Carousel>
    )
}

export default EventPreviewCarousel

Here's a screenshot of my code running on the current Safari version on an iPhone 13 with iOS 16.0. It also looks the same on this device on Firefox 108.0.

What am I doing incorrectly? Any advice would be greatly appreciated. Thank you!