title: Creating a Custom Button in React Typescript and add onClick Event
body: <p>I am trying to create a custom button component in a React Typescript project that use React Hooks and Styled components.</p>
  
  <pre><code>// Button.tsx
  import React, { MouseEvent } from "react";
  import styled from "styled-components";
  
  export interface IButtonProps {
      children?: React.ReactNode;
      props?: any;
      onClick?:
          | ((event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; void)
          | undefined;
  }
  
  const Button: React.FC&lt;IButtonProps&gt; = ({
      children,
      onClick = () =&gt; {},
      ...props
  }) =&gt; {
      const handleOnClick = (e: MouseEvent&lt;HTMLButtonElement&gt;) =&gt; {
          onClick(e);
      };
      return (
          &lt;ButtonStyles onClick={handleOnClick} {...props}&gt;
              {children}
          &lt;/ButtonStyles&gt;
      );
  };
  
  export default Button;
  
  const ButtonStyles = styled.button``;
  
  </code></pre>
  
  <p>This is the component I want to use my custom Button</p>
  
  <pre><code>// Login.tsx
  import React from "react";
  import Button from "../../components/Generic/Button/Button";
  
  const Login: React.FC = () =&gt; {
      const clickMe = () =&gt; {
          console.log("Button Clicks");
      };
  
      return (
          &lt;div&gt;
              &lt;Button onClick={clickMe}&gt;My Button&lt;/Button&gt;
          &lt;/div&gt;
      );
  };
  
  export default Login;
  
  </code></pre>
  
  <p>I want to click on my custom button and want to print the console log message when I click on it. But I am getting the following error. How to resolve this issue?</p>
  
  <pre><code>Argument of type 'MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;' is not assignable to parameter of type 'MouseEvent&lt;HTMLButtonElement, MouseEvent&lt;Element, MouseEvent&gt;&gt;'.
    Type 'MouseEvent' is missing the following properties from type 'MouseEvent&lt;Element, MouseEvent&gt;': nativeEvent, isDefaultPrevented, isPropagationStopped, persist  TS2345
  
      16 | }) =&gt; {
      17 |    const handleOnClick = (e: MouseEvent&lt;HTMLButtonElement&gt;) =&gt; {
    &gt; 18 |        onClick(e);
         |                ^
      19 |    };
      20 |    return (
      21 |        &lt;ButtonStyles onClick={handleOnClick} {...props}&gt;
  </code></pre>