Stripe pricing table with typescript

const PricingTable:FC = () => (
    <stripe-pricing-table
    pricing-table-id="prctbl_xxxx"
    publishable-key="pk_test_xxxx"
    />
)

Property 'stripe-pricing-table' does not exist on type 'JSX.IntrinsicElements'.

declare global {
  export namespace JSX {
    interface IntrinsicElements {
      'stripe-pricing-table': {
        key: string;
        'pricing-table-id': string;
        'publishable-key': string;
        'client-reference-id'?: string;
      };
    }
  }
}

  declare namespace JSX {
    interface IntrinsicElements {
      'stripe-pricing-table': {
        //key: string;
        'pricing-table-id': string;
        'publishable-key': string;
        'client-reference-id'?: string;
      };
    }
  }

- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "include": ["next-env.d.ts", "./stripe.d.ts", "**/*.ts", "**/*.tsx"],

import Script from "next/script";
import { FC } from "react";

export const NextStripePricingTable:FC<{
    pricingTableId?: string;
    publishableKey?: string;
    clientReferenceId?: string;
}> = ({pricingTableId,publishableKey,clientReferenceId}) => {
    if (!pricingTableId || !publishableKey) return null;
    return (
        <>
            <Script
                async
                strategy='lazyOnload'
                src='https://js.stripe.com/v3/pricing-table.js'

            />
            <stripe-pricing-table
                pricing-table-id={pricingTableId}
                publishable-key={publishableKey}
                client-reference-id={clientReferenceId}
            />
        </>
    )
}