title: How to type onFocus function event parameter for material ui Input
body: <p>I am creating a custom dropdown using material ui <code>Input</code> and <code>Popper</code>. When user focuses in <code>Input</code>, I want to set popper <code>open</code> to <code>true</code>. I am also using typescript.</p>
  
  <pre><code>import ClickAwayListener from '@material-ui/core/ClickAwayListener';
  import Grow from '@material-ui/core/Grow';
  import Input from '@material-ui/core/Input';
  import Paper from '@material-ui/core/Paper';
  import Popper from '@material-ui/core/Popper';
  import MenuItem from '@material-ui/core/MenuItem';
  import MenuList from '@material-ui/core/MenuList';
  import React from 'react';
  
  export function PlaceTreeSearch() {
    const [searchTerm, setSearchTerm] = React.useState('');
    const [anchorEl, setAnchorEl] = React.useState&lt;null | HTMLElement&gt;(null);
  
    const handleSearchTermChange = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      setSearchTerm(event.target.value);
    };
  
    const onFocus = (event: any) =&gt; {
      setAnchorEl(event.currentTarget);
    };
  
    const handleClose = () =&gt; {
      setAnchorEl(null);
    };
  
    const open = Boolean(anchorEl);
    return (
      &lt;div&gt;
        &lt;ClickAwayListener onClickAway={handleClose}&gt;
          &lt;div&gt;
            &lt;Input
              id='custom-select'
              onChange={handleSearchTermChange}
              onFocus={onFocus}
              value={searchTerm}
              placeholder='Search'
            /&gt;
            &lt;Popper
              open={open}
              anchorEl={anchorEl}
              transition={true}
              placement='bottom-start'
              disablePortal={true}
              style={{ zIndex: 999, width: '100%' }}
            &gt;
              {({ TransitionProps }: any) =&gt; {
                  return (
                  &lt;Grow
                      {...TransitionProps}
                      style={{ transformOrigin: '0 0 0' }}
                  &gt;
                      &lt;Paper&gt;
                          &lt;MenuList autoFocusItem={open} id="menu-list-grow"&gt;
                              &lt;MenuItem&gt;Profile&lt;/MenuItem&gt;
                              &lt;MenuItem&gt;My account&lt;/MenuItem&gt;
                              &lt;MenuItem&gt;Logout&lt;/MenuItem&gt;
                          &lt;/MenuList&gt;
                      &lt;/Paper&gt;
                  &lt;/Grow&gt;
              )}}
            &lt;/Popper&gt;
          &lt;/div&gt;
        &lt;/ClickAwayListener&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Currently, I have the <code>onFocus</code> function as follows</p>
  
  <pre><code>  const onFocus = (event: any) =&gt; {
      setAnchorEl(event.currentTarget);
    };
  </code></pre>
  
  <p>But I want to type the <code>event</code> properly instead of giving <code>any</code>.</p>
  
  <p>I tried the following</p>
  
  <pre><code>  const onFocus = (event: React.MouseEvent&lt;EventTarget&gt;) =&gt; {
      setAnchorEl(event.currentTarget as HTMLElement);
    };
  </code></pre>
  
  <p>But this is throwing the following error</p>
  
  <pre><code>Type '(event: React.MouseEvent&lt;EventTarget, MouseEvent&gt;) =&gt; void' is not assignable to type '(event: FocusEvent&lt;HTMLInputElement | HTMLTextAreaElement&gt;) =&gt; void'
  </code></pre>
  
  <p>How do I fix this error?</p>