When trying to attach (I want to upgrade

"use client";

import { RainbowButton } from "@/components/ui/rainbow-button";
import { Autumn as autumn } from "autumn-js";
export const UpgradeSubscription = ({
    customerId,
    isPro,
}: {
    customerId: string;
    isPro: boolean;
}) => {
    return (
        <RainbowButton
            disabled={isPro}
            onClick={async () => {
                await autumn.checkout({
                    customer_id: customerId,
                    product_id: "pro",                    
                });
            }}
        >
            {isPro ? "Upgrade to Pro" : "You are a Pro User"}
        </RainbowButton>
    );
};

"use client";

import { RainbowButton } from "@/components/ui/rainbow-button";
import { Autumn as autumn } from "autumn-js";
export const UpgradeSubscription = ({
    customerId,
    isPro,
}: {
    customerId: string;
    isPro: boolean;
}) => {
    return (
        <RainbowButton
            disabled={isPro}
            onClick={async () => {
                await autumn.checkout({
                    customer_id: customerId,
                    product_id: "pro",                    
                });
            }}
        >
            {isPro ? "Upgrade to Pro" : "You are a Pro User"}
        </RainbowButton>
    );
};