title: useRef Typescript error: Property 'current' does not exist on type 'HTMLElement'
body: <p>I'm making a Datepicker with React and Typescript, and I can't seem to get over the errors with <code>useRef</code> and the ref's <code>.current</code> property. I'm trying to get the <code>div</code> I'm assigning the ref to to close when the document is clicked outside of it.</p>
  <p>I just can't quite seem to figure out what I'm doing wrong. Here is my code:</p>
  <pre><code>function Datepicker({label, placeholder}: DatepickerProps){
    const [open, setOpen] = React.useState(false)
    const [day, setDay] = React.useState(0)
    const [month, setMonth] = React.useState(new Date().getMonth())
    const [year, setYear] = React.useState(new Date().getFullYear())
    const picker = React.useRef(null) as HTMLElement | null
  
    React.useEffect(() =&gt; {
      document.addEventListener(&quot;mousedown&quot;, toggle)
      return () =&gt; {
        document.removeEventListener(&quot;mousedown&quot;, toggle)
      };
    }, []);
  
    const toggle = (e: MouseEvent) =&gt; {
      if (picker &amp;&amp; picker.current){
        if (picker.current.contains(e.target) === false){
          setOpen(false)
        }
      }
    }
  
    //...
  
    return(
      
      //...
  
      &lt;div 
        ref={picker}
        className={&quot;datepicker-picker&quot; + (open ? &quot; open&quot; : &quot;&quot;)}
      &gt;
  
        //...
  
    )
  }
  
  
  </code></pre>
  <p><code>React.useRef(null) as HTMLElement | null</code> is giving me the following problem:</p>
  <pre><code>Conversion of type 'MutableRefObject&lt;null&gt;' to type 'HTMLElement' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
    Type 'MutableRefObject&lt;null&gt;' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 234 more.ts(2352)
  </code></pre>
  <p><code>.current</code> is giving me the following:</p>
  <pre><code>Property 'current' does not exist on type 'HTMLElement'.
  </code></pre>
  <p>and when I try to apply the ref to a <code>div</code> element, its says the following:</p>
  <pre><code>Type 'HTMLElement | null' is not assignable to type 'string | ((instance: HTMLDivElement | null) =&gt; void) | RefObject&lt;HTMLDivElement&gt; | null | undefined'.
    Type 'HTMLElement' is not assignable to type 'string | ((instance: HTMLDivElement | null) =&gt; void) | RefObject&lt;HTMLDivElement&gt; | null | undefined'.
      Type 'HTMLElement' is not assignable to type 'string'.ts(2322)
  index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;'
  </code></pre>
  <p>I'm using VSCode as my IDE, if that helps at all.</p>