title: React Onclick - No overload matches this call
body: <p>New to TS and got to say the errors are not very friendly. </p>
  
  <p>I'm trying to pass a hook function to a component as a prop which I've added to my interface and I get this error which I can not understand. </p>
  
  <blockquote>
    <p>No overload matches this call.
      Overload 1 of 2, '(props: Pick, HTMLButtonElement>, "form" | ... 264 more ... | "onTransitionEndCapture"> &amp; { ...; } &amp; IButtonProps, "form" | ... 267 more ... | "setActivity"> &amp; Partial&lt;...>, "form" | ... 267 more ... | "setActivity"> &amp; { ...; } &amp; { ...; }): ReactElement&lt;...>', gave the following error.
        Property 'setActivity' is missing in type '{ children: string | (string &amp; {}) | (string &amp; ReactElement ReactElement Component)>) | (new (props: any) => Component&lt;...>)>) | (string &amp; ReactNodeArray) | (string &amp; ReactPortal); active: Boolean; onClick: () => Function; }' but required in type 'Pick, HTMLButtonElement>, "form" | ... 264 more ... | "onTransitionEndCapture"> &amp; { ...; } &amp; IButtonProps, "form" | ... 267 more ... | "setActivity"> &amp; Partial&lt;...>, "form" | ... 26</p>
  </blockquote>
  
  <p>I've tried a few things that I've read like putting the method in an anonymous function and setting my interfact onclick to be <code>(e: React.MouseEvent) =&gt; void</code>, but none seems to be working. From my code I feel like I'm doing everything correctly but obviously not. </p>
  
  <p>Here is my component: </p>
  
  <pre><code>interface IButtonProps {
    children: string,
    active: Boolean,
    setActivity: Function,
    onClick: (e: React.MouseEvent) =&gt; void,
  }
  
  
  // Styling
  const Button = styled.button&lt;IButtonProps&gt;`
    ${({ theme }) =&gt; `
      border: ${theme.TabsBorder};
      font-size: ${theme.TabsFontsize};
      background-color: transparent;
      flex: 1;
      padding: 1rem;
      outline: 0;
  
      &amp;:hover {
        background-color: ${theme.TabActiveBackground};
        color: ${theme.TabActiveColour};
      }
  
      ${({ active }) =&gt; active &amp;&amp; `
        background-color: ${theme.TabActiveBackground}
        color: ${theme.TabActiveColour};
      `}
    `}
  `;
  
  const Item: FC&lt;IButtonProps&gt; = ({
    children,
    active,
    setActivity,
  }) =&gt; (
    &lt;Button
      active={active}
      onClick={() =&gt; setActivity}
    &gt;
      {children}
    &lt;/Button&gt;
  );
  </code></pre>
  
  <p>SetActivity is the hook that I'm passing into the component to reference. </p>