Obtener un gancho de devolución de llamada de uso de error de compilación llamado condicionalmente. si no uso useCallback obtengo el error Los accesorios JSX no deberían usar funciones de flecha

 const LinkComp = <T extends {}>(props: LinkProps & T extends AnchorProps ? AnchorProps : ButtonProps) => { const { title, hideTitle, children, url = '', action, label, newWindow, className, iconName, isExternal, inheritColor = true, underlineOnHover = true, underline = false, theme = '', bold = false, onClick, modal = false, forceAnchorTag = false, appendQueryParams = true, showOutline = true, ...linkProps } = props; const [handleClick] = useRouter(action, url); const forwardedParams = useSelector(selectForwardedQueryParams); const linkContent = ( <> {iconName && <Icon name={iconName} className='mr-3' />} {!hideTitle && (title || children)} </> ); if (modal) { if (linkProps.modalTitle) delete linkProps.modalTitle; return ( <button {...(anchorProps as ButtonProps)} role='link' onClick={onClick as ButtonProps['onClick']}> {linkContent} </button> ); } // queryString.stringifyUrl combines the params from both url and forwarded params. // don't append the params for `tel` links const forwardedParamsUrl = queryString.stringifyUrl({ url, query: !url?.includes('tel:') && forwardedParams }); const handleAnchorClick = useCallback((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => { if (handleClick) handleClick(e); return true; },[handleClick]); if (forceAnchorTag) { return ( <a href={forwardedParamsUrl} {...(anchorProps as AnchorProps)} onClick={handleAnchorClick}> {linkContent} </a> ); } // search extras uses the query params in a different way, so no need to append them here const fullUrl = appendQueryParams ? forwardedParamsUrl : url; return ( <Link href={fullUrl} passHref={isExternal || newWindow}> <a {...(anchorProps as AnchorProps)} onClick={handleClick}> {linkContent} </a> </Link> ); }; export default LinkComp;