title: CheckBox onClick is not working in react type-script
body: <p>I have designed a component MyCheckBox ( i used it as helper component ), so I imported it in another component, but whenever i am trying to trigger the event, it not triggered.</p>
  <p>Code for reference</p>
  <p>MyCheck Box</p>
  <pre><code>
      interface MyCheckBoxProps
      {
       onClick?:MouseEventHandler&lt;HTMLInputElement&gt;;
       checked?:boolean
      }
      
      export const MyCheckBox (props:MyCheckBoxProps): JSX.Element =&gt;{
      return(
                &lt;input
                    type=&quot;checkbox&quot;
                    id={id}
                    onClick={onClick}
                    checked={checked}
                  /&gt;
            )  
      } 
  
  </code></pre>
  <p>When I Imported it</p>
  <pre><code>
  const[check,setCheck] = useState(false)
  
    const handleCheckChange = (e: any, key: string) =&gt; {
      console.log(&quot;check&quot;, e)  // =&gt; this console log does not show up
      if (key === &quot;newPostActivity&quot;) {
        console.log(&quot;check&quot;, e)
      setCheck(e.target.checked)
      }
    }
    &lt;MyCheckBox checked={check} onClick={(e)=&gt;handleCheckChange(e,&quot;some string&quot;)}/&gt;
  
  
  </code></pre>
  <p>Whenever I click on MyCheckBox , the event ( handleCheckChange )is never triggered</p>
  <p>Anybody please help?</p>