title: useRef.current.contains is not a function
body: <p>I have a nav menu built with material-ui/core in Navbar.</p>
  <p>I use useRef to track the position of clicked button on toggle menu close.
  <code>anchorRef.current.contains(event.target)</code></p>
  <p>And I am getting <code>'Uncaught TypeError: anchorRef.current.contains is not a function'</code> .</p>
  <p>I tried 'Object.values(anchorRef.current).includes(event.target)' instead, it always returns false.</p>
  <p>-- update --</p>
  <p>anchorRef.current.props Object.</p>
  <pre><code>withStyles {
      props:{
       aria-haspopup: &quot;true&quot;
       aria-owns: undefined
       children: &quot;계정&quot;
       className: &quot;nav-menu--btn&quot;
       onClic: f onClick()
       get ref: f()
        isReactWarning: true
        arguments: (...)
        caller: (...)
        length: 0
        name: &quot;warnAboutAccessingRef&quot;
       ...
      }, context{...}, refs{...}, ...}
  </code></pre>
  <h2>ToggleMenuList</h2>
  <pre><code>const ToggleMenuList = ({ navAdminList, navAdminItems, classes }) =&gt; {
    const [activeId, setActiveId] = useState(null);
    const anchorRef = useRef(null);
    const handleToggle = id =&gt; {
      setActiveId(id);
    };
    const handleClose = event =&gt; {
      if (anchorRef.current &amp;&amp; anchorRef.current.contains(event.target)) {
        return;
      }
      setActiveId(null);
    };
  
    return (
      &lt;React.Fragment&gt;
        &lt;div className={`nav-menu--admin ${classes.root}`}&gt;
          {navAdminList.map(e =&gt; (
            &lt;div key={e.id}&gt;
              &lt;Button
                ref={anchorRef}
                aria-owns={activeId === e.id ? 'menu-list-grow' : undefined}
                aria-haspopup=&quot;true&quot;
                onClick={() =&gt; handleToggle(e.id)}
              &gt;
                {e.name}
              &lt;/Button&gt;
              {activeId === e.id &amp;&amp; (
                &lt;ToggleMenuItems
                  id={e.id}
                  activeId={activeId}
                  handleClose={handleClose}
                  anchorRef={anchorRef}
                  items={navAdminItems[e.id]}
                /&gt;
              )}
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default withStyles(styles)(ToggleMenuList);
  
  </code></pre>
  <h2>ToggleMenuItems</h2>
  <pre><code> const ToggleMenuItems = ({
        listId,
        activeId,
        handleClose,
        anchorRef,
        items,
      }) =&gt; {
        const isOpen = activeId === listId;
        const leftSideMenu = activeId === 3 || activeId === 4 ? 'leftSideMenu' : '';
      
        return (
          &lt;Popper
            open={isOpen}
            anchorEl={anchorRef.current}
            keepMounted
            transition
            disablePortal
          &gt;
            {({ TransitionProps, placement }) =&gt; (
              &lt;Grow
                {...TransitionProps}
                style={{
                  transformOrigin:
                    placement === 'bottom' ? 'center top' : 'center bottom',
                }}
                className={`toggle-menu ${leftSideMenu}`}
              &gt;
                &lt;Paper id=&quot;menu-list-grow&quot;&gt;
                  &lt;ClickAwayListener
                    onClickAway={handleClose}
                  &gt;
                    &lt;MenuList className=&quot;toggle-menu--list&quot;&gt;
                      {items.map(e =&gt; (
                        &lt;MenuItem
                          key={e.id}
                          className=&quot;toggle-menu--item&quot;
                          onClick={handleClose}
                        &gt;
                          &lt;Link
                            to={e.to}
                            className=&quot;anchor td-none c-text1 toggle-menu--link&quot;
                          &gt;
                            {e.name}
                          &lt;/Link&gt;
                        &lt;/MenuItem&gt;
                      ))}
                    &lt;/MenuList&gt;
                  &lt;/ClickAwayListener&gt;
                &lt;/Paper&gt;
              &lt;/Grow&gt;
            )}
          &lt;/Popper&gt;
        );
      };
      
      export default ToggleMenuItems;
  </code></pre>
  <pre><code>react: ^16.8.6
  react-dom: ^16.8.6
  react-router-dom: ^4.3.1
  @material-ui/core: ^3.1.2
  </code></pre>