title: Typescript, styled-component error: TS2769: No overload matches this call. Overload 1 of 2
body: <p>This is my styledComponent:</p>
  <pre><code>const stopPropagation = (event: Event): void =&gt; {
    event.stopPropagation();
  };
  
  &lt;StyledComp onClick={stopPropagation}&gt; //error occurs here
      hi StyledComp
  &lt;/StyledComp&gt;
  </code></pre>
  <p>and this is how I defined it:</p>
  <pre><code>export type Prop = {
    onClick: (event: Event) =&gt; void;
  };
  
  export const StyledComp = styled.div&lt;Prop&gt;`
    display: flex;
  `;
  </code></pre>
  <p>But it returns an error like:</p>
  <blockquote>
  <p>TS2769: No overload matches this call.   Overload 1 of 2, '(props: Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes, HTMLDivElement&gt;, &quot;title&quot; | &quot;slot&quot; | ... 252 more ... | &quot;is&quot;&gt; &amp; { ...; } &amp; StyledComp, &quot;title&quot; | ... 254 more ... | &quot;is&quot;&gt; &amp; Partial&lt;...&gt;, &quot;title&quot; | ... 254 more ... | &quot;is&quot;&gt; &amp; { ...; } &amp; { ...; }): ReactElement&lt;...&gt;', gave the following error.     Type '(event: Event) =&gt; void' is not assignable to type '((event: MouseEvent&lt;HTMLDivElement, MouseEvent&gt;) =&gt; void) &amp; ((event: Event) =&gt; void)'.       Type '(event: Event) =&gt; void' is not assignable to type '(event: MouseEvent&lt;HTMLDivElement, MouseEvent&gt;) =&gt; void'.         Types of parameters 'event' and 'event' are incompatible.           Type 'MouseEvent&lt;HTMLDivElement, MouseEvent&gt;' is not assignable to type 'Event'.             Types of property 'target' are incompatible.               Property 'value' is missing in type 'EventTarget' but required in type '{ value: string; }'.   Overload 2 of 2, '(props: StyledComponentPropsWithAs&lt;&quot;div&quot;, any, StyledComp, never&gt;): ReactElement&lt;StyledComponentPropsWithAs&lt;&quot;div&quot;, any, StyledComp, never&gt;, string | ... 1 more ... | (new (props: any) =&gt; Component&lt;...&gt;)&gt;', gave the following error.     Type '(event: Event) =&gt; void' is not assignable to type '((event: MouseEvent&lt;HTMLDivElement, MouseEvent&gt;) =&gt; void) &amp; ((event: Event) =&gt; void)'.       Type '(event: Event) =&gt; void' is not assignable to type '(event: MouseEvent&lt;HTMLDivElement, MouseEvent&gt;) =&gt; void'.</p>
  </blockquote>
  <p><strong>Note</strong>: You can find styled-component&amp;Typescript docs <a href="https://styled-components.com/docs/api#typescript" rel="nofollow noreferrer">here</a>!</p>
  <p><strong>Edit:</strong></p>
  <p>This is <strong>Event</strong> type:</p>
  <pre><code>export type Event = {
    target: {
      value: string;
    };
    stopPropagation: () =&gt; void;
    preventDefault: () =&gt; void;
  };
  </code></pre>