CheckBox onClick is not working in react type-script

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.

Code for reference

MyCheck Box

    interface MyCheckBoxProps
    {
     onClick?:MouseEventHandler<HTMLInputElement>;
     checked?:boolean
    }
    
    export const MyCheckBox (props:MyCheckBoxProps): JSX.Element =>{
    return(
              <input
                  type="checkbox"
                  id={id}
                  onClick={onClick}
                  checked={checked}
                />
          )  
    } 

When I Imported it

const[check,setCheck] = useState(false)

  const handleCheckChange = (e: any, key: string) => {
    console.log("check", e)  // => this console log does not show up
    if (key === "newPostActivity") {
      console.log("check", e)
    setCheck(e.target.checked)
    }
  }
  <MyCheckBox checked={check} onClick={(e)=>handleCheckChange(e,"some string")}/>

Whenever I click on MyCheckBox , the event ( handleCheckChange )is never triggered

Anybody please help?