in NextJS 14 I get an error

[carlosLMZarego]

Hi, I'm getting this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Calendar`.

Import trace for requested module:
./src/components/event/calendar.tsx
 ⚠ ./src/components/event/calendar.tsx
Attempted import error: 'react-calendar-toolkit' does not contain a default export (imported as 'Datepicker').

basically I've a event/page.tsx placed in src/app

import * as React from 'react';
import {FunctionComponent} from "react";
import Calendar from "@/components/event/calendar";

type Props = {

};

const EventPage :  FunctionComponent<Props> = (props: Props) => {
    return (
        <div>
            <Calendar/>
        </div>
    );
};

export default EventPage

and the basic example as Calendar

"use client"

import * as React from 'react';
import {FunctionComponent} from "react";
import Datepicker from 'react-calendar-toolkit';
import 'react-calendar-toolkit/lib/style/default.css'

type Props = {

};

const Calendar :  FunctionComponent<Props> = (props: Props) => {
    return (
        <div>
            <Datepicker onDateSet={date => {console.log('date set', date)}} />
        </div>
    );
};

export default Calendar

do you know what could be the problem here? thanks

UPDATE!

after create my custom d.ts file

declare module 'react-calendar-toolkit' {
    import * as React from 'react';

    type DatePickerMinPrecision = 'year' | 'month' | 'day';

    type InputModes = 'popover' | 'modal';

    type DefaultTheme = Record<string, string>;

    interface DatePickerDateFnsLocale {}

    interface DateMatcherInterface {
        isWeekend: boolean;
        precision: DatePickerMinPrecision;
        date: Date;
    }

    interface DatePickerPropsShared {
        initialDate?: Date;
        today?: Date;
        startDate?: Date;
        endDate?: Date;
        showHeader?: boolean;
        title?: string;
        minPrecision?: DatePickerMinPrecision;
        wrapWith?: React.ReactNode;
        renderDayAs?: React.ReactNode;
        wrapDaysWith?: React.ReactNode;
        renderMonthAs?: React.ReactNode;
        wrapMonthWith?: React.ReactNode;
        renderYearAs?: React.ReactNode;
        wrapYearWith?: React.ReactNode;
        renderWeekDayAs?: React.ReactNode;
        wrapWeekDaysWith?: React.ReactNode;
        renderHeaderAs?: React.ReactNode;
        renderSelectorAs?: React.ReactNode;
        disableDate?: (param: DateMatcherInterface) => boolean;
        highlightDate?: (param: DateMatcherInterface) => boolean;
        highlightWeekends?: boolean;
    }

    interface DatePickerProps extends DatePickerPropsShared {
        onDateSet: (date: Date) => any;
        dateFnsLocale?: DatePickerDateFnsLocale;
        theme?: object;
    }

    interface InputProps {
        onDateSet: (date: Date) => any;
        dateFnsLocale?: DatePickerDateFnsLocale;
        theme?: object;
        mode?: InputModes;
        hideOnSelect?: boolean;
        renderInputAs?: React.ReactNode;
        renderDatePickerAs?: React.ReactNode;
        wrapPopoverWith?: React.ReactNode;
        wrapModalWith?: React.ReactNode;
        formatPattern?: string;
        datePickerProps?: DatePickerPropsShared;
    }


    export class Datepicker extends React.Component<DatePickerProps> {}

    export class DatePickerInput extends React.Component<InputProps> {}

    export function useFormatDate(): (pattern: string, date: Date) => string;

    export function useThemePostCSS(
        defaultTheme?: DefaultTheme
    ): [Object, Function];

    export function useScrollIntoView(
        ref: React.RefObject<HTMLElement>,
        containerSelector: string,
        condition: boolean
    ): void;

    export function useOnClickOutside(
        ref: React.RefObject<HTMLElement>,
        handler: Function
    ): void;

    export function useThemeContext(): object;

    export function setCSSVariable(
        element: HTMLElement,
        variableName: string,
        value: string
    ): void;

    export function getCSSVariable(
        element: HTMLElement,
        variableName: string
    ): string;

    export function removeCSSVariable(
        element: HTMLElement,
        variableName: string
    ): void;

    export const defaultTheme: DefaultTheme;


}

this work as expected, I get a warning

Warning: Datepicker: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

but component is rendered, the ts definition file is wrong and not consistent with the js code.