I am trying to create a simple Hamburger Menu component using React & Typescript. What I want to do is to pass the onClick event handler to this menu componunent as a prop. This is the code that I currently have:

function Hamburger({ onClick }) {

  return (

    <Box

      as="button"

      type="button"

      p="1"

      fontSize="2xl"

      color="gray.600"

      onClick={onClick}

      display={{ base: "block", lg: "none" }}

    >

      <HiOutlineMenu />

    </Box>

  )

}

However, typescript complains about the {onClick} prop that is being passed:

Binding element 'onClick' implicitly has an 'any' type

I thought that I could fix this by hovering over the onClick key in the Box component and seeing what type onClick takes. Hovering over that key produces the following message:

As such, I thought to modify the {onClick} prop as follows:

function Hamburger({ onClick }: React.MouseEventHandler | undefined) {

But that just produces a new error on {onClick}:

Property 'onClick' does not exist on type 'MouseEventHandler<Element> | undefined'.ts(2339)

var onClick: any

I am now at a loss of what to do. As such, I am wondering -- how should I type {onClick}?

Thanks.