title: Type 'MouseEvent<Element, MouseEvent>' is not assignable to type 'MouseEvent<HTMLDivElement, MouseEvent>'
body: <p>I am writing a react application in typescript where I am trying to handle both right click and left click. </p>
  
  <p>This is my interface</p>
  
  <pre><code>interface ButtonProps {
      value: CellValue;
      state: CellState;
      row: number;
      col: number;
      onClick(rowParam: number, colParam: number) : (e: React.MouseEvent) =&gt; void;
      onContext(rowParam: number, colParam: number) : (e: React.MouseEvent) =&gt; void;
  } 
  </code></pre>
  
  <p>Now I have declared the callback function like</p>
  
  <pre><code>const handleContextMenu = (rowParam: number, cellParam: number) =&gt; (e: React.MouseEvent&lt;HTMLDivElement, MouseEvent&gt;) : void =&gt; {
        e.preventDefault();
  }
  </code></pre>
  
  <p>and finally declared my component like</p>
  
  <pre><code>&lt;Button 
    key={`${rowIndex}*${cellIndex}`} 
    value={cell.value} 
    state={cell.state} 
    onClick={handleCellClick}
    onContext={handleContextMenu}
    row={rowIndex} 
    col={cellIndex} 
  /&gt;
  </code></pre>
  
  <p>But I get an error</p>
  
  <pre><code>Type '(rowParam: number, cellParam: number) =&gt; (e: React.MouseEvent&lt;HTMLDivElement, MouseEvent&gt;) =&gt; void' is not assignable to type '(rowParam: number, colParam: number) =&gt; (e: MouseEvent&lt;Element, MouseEvent&gt;) =&gt; void'.
    Type '(e: React.MouseEvent&lt;HTMLDivElement, MouseEvent&gt;) =&gt; void' is not assignable to type '(e: MouseEvent&lt;Element, MouseEvent&gt;) =&gt; void'.
      Types of parameters 'e' and 'e' are incompatible.
        Type 'MouseEvent&lt;Element, MouseEvent&gt;' is not assignable to type 'MouseEvent&lt;HTMLDivElement, MouseEvent&gt;'.
          Type 'Element' is missing the following properties from type 'HTMLDivElement': align, accessKey, accessKeyLabel, autocapitalize, and 111 more.  TS2322
  
      53 |                 state={cell.state} 
      54 |                 onClick={handleCellClick}
    &gt; 55 |                 onContext={handleContextMenu}
         |                 ^
      56 |                 row={rowIndex} 
      57 |                 col={cellIndex} 
      58 |             /&gt;
  </code></pre>
  
  <p>I don't know much about typescript but according to me HTMLDivElement should be of type HTMLElement right?</p>