I have a component called `Button` which accepts the `onChange`props. Right now the type of `onChange: event: React.ChangeEvent<HTMLInputElement>` and working fine. I want to create a `union type` of expecting the following two types. I wanted to do something like this which makes this `onChange` generic type.

```
import React from 'react';

type handleChange = (value: string,checked: boolean,name: string) => void 

type eventHandleChange = <T extends HTMLElement>(
  event: React.ChangeEvent<T>
) => void;

type Change = handleChange | eventHandleChange;

type buttonProps ={
  onChange?: Change
}

export const Button =(Props:buttonProps) =>{

  //code here

}

```

But when I am trying to pass a function to props like this one it's giving me an error

```
import React from 'react';
import Button from '../button';

export const FooComponent=()=>{

  const changHandler = (event: React.ChangEvent<HTMLInputElement>)=>{
   setSelectedValue(event.targe.value)
  }

  return (
    <Button onChange={changeHandler} />
  )
}

```

**ERROR**

```
'(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'eventHandleChange | handleChange | undefined'.

Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'eventHandleChange'.

Types of parameters 'event' and 'event' are incompatible.       
Type 'ChangeEvent<T>' is not assignable to type 'ChangeEvent<HTMLInputElement>'.         
Type 'T' is not assignable to type 'HTMLInputElement'.           
Type 'HTMLElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 49 more.

```

As `HTMLInputElement` is extends from `HTMLElement` `T` Should be generic here for all `HTMLElement`. I am not sure what I am missing here in implemantation.