I am trying to import my cal.com calendar in my next.js project but I run into this error.
the code is the one provided from cal.com and is for react, but my file is .tsx.
I am pretty amateur in programming, but if you explain me I can do it. Thanks

import Cal, { getCalApi } from "@calcom/embed-react";
import { useEffect } from "react";

export default function MyApp() {
    useEffect(() => {
        const fetchData = async () => {
            try {
                // Get the Cal API
                const cal: any = await getCalApi({});
                // Use the Cal API to configure the calendar
                cal("ui", {
                    styles: { branding: { brandColor: "#000000" } },
                    hideEventTypeDetails: false,
                    layout: "month_view"
                });
            } catch (error) {
                console.error("Error fetching Cal API:", error);
            }
        };
        fetchData();
    }, []);

    return (
        <Cal 
            calLink="my name"
            style={{ width: "100%", height: "100%", overflow: "scroll" }}
            config={{ layout: 'month_view' }}
        />
    );
}