How to extend or overwrite a third party library component interface property?

Question

typescript

Good afternoon!
Installed the Link component from the react-scroll package .

I need to hang onClick on this component with a handler that handles the event, but in the component's interface, onClick does not involve passing the event.
How can the interface be extended without changing typing.d.ts within the package itself?

How I try to use:

<ScrollLink 
   to="program" 
   duration={300} 
   smooth={true} 
   offset={-50} 
   className="Link Header-Link" 
   data-ymgoal="MY_GOAO"
   onClick={ ymHandler }
  >

Interface:

export interface ReactScrollLinkProps {
    to: string;
    containerId?: string;
    activeClass?: string;
    spy?: boolean;
    hashSpy?: boolean;
    smooth?: boolean | string;
    offset?: number;
    delay?: number;
    isDynamic?: boolean;
    onClick?(): void;
    duration?: number | string;
    absolute?: boolean;
    onSetActive?(to: string): void;
    onSetInactive?(): void;
    ignoreCancelEvents?: boolean;
}

My handler function:

const ymHandler = (event: any): void => {
    console.log(event);
    const goal = event.currentTarget.getAttribute('data-ymgoal');
    ym('reachGoal', goal);
  }

Answer 1

You can wrap it in a div and hang an onClick handler on it by changing

const goal = event.currentTarget.getAttribute('data-ymgoal');

on the

const goal = event.currentTarget.firstElementChild.getAttribute('data-ymgoal');

Answer 2

fix typing and send a pull request to DefinitelyTyped .
because react-scroll itself passes the event .