title: Uncaught TypeError: .includes is not a function with React Ref
body: <p>I'm trying to make a menu that when it is clicked it shows up. This works fine. However I want the menu to close whenever anything but the original menu or item list is selected. When I do this however it returns with the error</p>
  
  <pre><code>Uncaught TypeError: _this.dropdownMenu.includes is not a function
      at HTMLDocument.eval (FeedItem.jsx:277)
  </code></pre>
  
  <p><strong>Visual</strong></p>
  
  <p><a href="https://i.stack.imgur.com/kuJQm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kuJQm.png" alt="enter image description here"></a></p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import styled from 'styled-components';
  
  const OptionMenu = styled.div `
      position: absolute;
      top: 20px;
      left: -130px;
      display: ${props =&gt; props.showMenu ? 'flex' : 'none'};
      flex-direction: column;
      width: 150px;
      background: #FFFFFF;
      border: 1px solid #EEEFEF;
      box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
      z-index: 100;
  `;
  
  const OptionItem = styled.div `
      color: #414141;
      font-size: 18px;
      cursor: pointer;
      padding: 10px 5px;
      transition: .2s;
  
      &amp;:hover {
          background-color: #F2F2F2;
      }
  `;
  
  
  class FeedItem extends Component {
      constructor() {
          super();
  
          this.state = {
              showMenu: false
          }
  
          this.dropdownMenu = React.createRef();
      }
  
      showMenu = (e) =&gt; {
          this.setState({ showMenu: true }, () =&gt; {
            document.addEventListener('click', this.closeMenu);
          });
      }
  
      closeMenu = (e) =&gt; {
          if(!this.dropdownMenu.includes(e.target)) {
              console.log('yes')
  
              this.setState({ showMenu: false }, () =&gt; {
                  document.removeEventListener('click', this.closeMenu);
              });
          }
      }
  
      render(props) {
          const { showMenu } = this.state;
  
          return(
              &lt;Container item={this.props.id}&gt;
                      &lt;UserOptions onClick={() =&gt; this.showMenu()} ref={this.dropdownMenu}&gt;
  
                          &lt;OptionMenu showMenu={showMenu}&gt;
                              &lt;OptionItem&gt;Share&lt;/OptionItem&gt;
                              &lt;OptionItem&gt;Something&lt;/OptionItem&gt;
                          &lt;/OptionMenu&gt;
                      &lt;/UserOptions&gt;
              &lt;/Container&gt;
          );
      }
  }
  
  export default FeedItem;
  </code></pre>
  
  <p>I'm using styled-components could this be an issue? Also I've delted most of the parts of the container and have just left the problem areas.</p>