Type 'MouseEvent' is not generic Typescript Error

I created a custom button component and wanted to handle onClick event outside this component. I setup the type of parameter for the onClickCallback as MouseEvent<HTMLButtonElement, MouseEvent>. Its what the onClick event normally requires for button component event type. But here I’m getting this issue.

Type ‘MouseEvent’ is not generic

Any help is highly appreciated. Much Thanks. 👍

"use client";
import React, { ReactNode } from "react";

/**
 * Custom General Purpose Button Definition
 * @param param0
 * @returns
 */

function CButton({
    children,
    className,
    onClickCallback,
    name,
}: {
    children: ReactNode;
    className?: string;
    onClickCallback?: (e: MouseEvent<HTMLButtonElement,MouseEvent>) => void;
    name?: string;
}) {
    return (
        <>
            <button
                className={
                    className ??
                    "btn inline-block bg-white border-[1px] border-gray-300 dark:border-gray-800 hover:text-white dark:bg-zinc-900 dark:hover:bg-gray-950 m-[1px]"
                }
                onClick={(e) => onClickCallback?.(e)}
                name={name}
            >
                {children}
            </button>
        </>
    );
}

export default CButton;

>Solution :

To fix this issue, you can use the React.MouseEvent type instead of MouseEvent. Here’s you can modify the onClickCallback parameter:

onClickCallback?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;