I was trying to put a debounce on the onClick action in the button component that usually saves / updates stuff, so i was trying to implement a debounce on its click, but i tried many methods and none seem to work:

import { useState, useCallback } from "react";
import { ReactNode } from "react";
import _ from 'lodash';
import debounce from 'lodash.debounce';

interface BtnProps {
    nomeBtn: string;
    icon: ReactNode;
    type?: "button" | "submit" | "reset";
    big?: boolean;
    median?: boolean;
    onClick?: () => void;
    form?: string;
    customCss?: string;
    disabled?: boolean;
    hardDisabled?: boolean;
}

export function GrnBtn({hardDisabled, disabled = false, big = false, customCss, median, nomeBtn, icon, onClick, type, form}: BtnProps) {    
    
    var debouncedClick;

    //const debouncedClick = _.debounce(() => {
    //    return onClick
    //}, 500); // 
    
    //const debouncedClickHandler = debounce( () => onClick, 1500, {maxWait: 2000})
    
    // const debouncedClickHandler = useCallback(
    //     debounce(() => onClick, 300), 
    // []);
    
   
    return (
        <button 
            form={form ? form : ""} 
            style={ big ? {fontSize: "32px"} : { fontSize: "18px" }  } 
            disabled={hardDisabled} 
            type={type} 
            onClick={debouncedClick} 
            className={` bg-custom-green ${customCss}  ${big ? "h-20 px-8" : "" } ${median ? "px-6" : "" } flex gap-2 px-4 items-center font-semibold justify-center shadow-md hover:${disabled ? "bg-slate-500" : "bg-custom-green"} text-white py-2 rounded-md border-none hover:bg-green-600 cursor-pointer hover:shadow-lg transition-all duration-500 hover:scale-105 `}
        >
            {icon}  {nomeBtn}
        </button>
    )
}

I was expecting the button to debounce correctly, but nothing happened: