title: ref.current.contains is not a function in React
body: <p>I made a dropdown toggle in React. My dropdown working perfectly fine. But when I try to close the dropdown while clicking outside of the dropdown menu. It shows error. I used ref to find the container element.
  Sample code</p>
  <pre><code>
  class Search extends React.Component{
      constructor()
      {
          super()
          this.state={
              notificationStatus:false,
              isFocus:false
  
  
          }
          this.container=React.createRef()
      }
      toggleNotification=()=&gt;
      {
          this.setState({notificationStatus:!this.state.notificationStatus});
      }
  
      componentDidMount() {
          document.addEventListener(&quot;mousedown&quot;, this.handleClickOutside);
        }
        componentWillUnmount() {
          document.removeEventListener(&quot;mousedown&quot;, this.handleClickOutside);
        }
        handleClickOutside = event =&gt; {
            if(this.container.current)
            {
          if (this.container.current &amp;&amp; !this.container.current.contains(event.target)) {
            this.setState({
              notificationStatus: false,
            });
          }
      }
        };
      render()
      {
          const {isFocus,notificationStatus}=this.state;
          return(
              &lt;div&gt;
                      &lt;div className=&quot;col-md-1 col-sm-1 bell-container flex all-center relative&quot;&gt;
                          &lt;img src={bell} onClick={this.toggleNotification} alt=&quot;bell icon&quot; /&gt;
                      &lt;/div&gt;
                  {
                      notificationStatus ?  &lt;NotificationList ref={this.container} /&gt; : null
                      
                  }
                  
              &lt;/div&gt;
  
              
          )
      }
  }
  
  </code></pre>