title: Cannot set useState hook value to opposite boolean
body: <p>I'm creating a DatePicker and using useState hook to manage it's visibility. On div click I've added the event listener which changes value, but it didn't work as I expected. It works only the first time, so initial value changes to true, but on second and third clicks this value stays to true and DatePicker stays visible on click.</p>
  
  <p>This is DatePicker</p>
  
  <pre><code>import React, { useState } from 'react';
  import OutsideClickHandler from 'react-outside-click-handler';
  import { renderInfo, getWeeksForMonth } from './utils';
  import {
      renderMonthAndYear,
      handleBack,
      handleNext,
      weekdays,
  } from '../../utils';
  
  const DatePicker = ({
      isOpen,
      setIsOpen,
      selected,
      setSelected,
      dayClick,
      dayClass,
  }) =&gt; {
      const startDay = new Date().setHours(0, 0, 0, 0);
  
      const [current, setCurrent] = useState(new Date(startDay));
  
      const weeks = getWeeksForMonth(current.getMonth(), current.getFullYear());
  
      function handleClick(date) {
          if (date &gt; startDay) {
              setSelected(date);
              setCurrent(date);
              setIsOpen(false);
  
              if (dayClick) {
                  dayClick(date);
              }
          }
      }
  
      return (
          &lt;div className="DatePicker-container"&gt;
              &lt;div
                  tabIndex="0"
                  role="button"
                  className="DatePicker-info"
                  onKeyPress={e =&gt; {
                      if (e.which === 13) {
                          setIsOpen(!isOpen);
                      }
                  }}
                  onClick={e =&gt; {
                      setIsOpen(!isOpen);
                  }}
              &gt;
                  {renderInfo(selected)}
              &lt;/div&gt;
              {isOpen &amp;&amp; (
                  &lt;OutsideClickHandler onOutsideClick={() =&gt; setIsOpen(false)}&gt;
                      &lt;div className="DatePicker"&gt;
                          &lt;div className="DatePicker__header"&gt;
                              &lt;span
                                  role="button"
                                  onClick={() =&gt; handleBack(current, setCurrent)}
                                  className="triangle triangle--left"
                              /&gt;
  
                              &lt;span className="DatePicker__title"&gt;
                                  {renderMonthAndYear(current)}
                              &lt;/span&gt;
  
                              &lt;span
                                  role="button"
                                  onClick={() =&gt; handleNext(current, setCurrent)}
                                  className="triangle triangle--right"
                              /&gt;
                          &lt;/div&gt;
  
                          &lt;div className="DatePicker__weekdays"&gt;
                              {weekdays.map(weekday =&gt; (
                                  &lt;div
                                      key={weekday}
                                      className="DatePicker__weekday"
                                  &gt;
                                      {weekday}
                                  &lt;/div&gt;
                              ))}
                          &lt;/div&gt;
                          {weeks.map((week, index) =&gt; (
                              &lt;div
                                  role="row"
                                  key={index}
                                  className="DatePicker__week"
                              &gt;
                                  {week.map((date, index) =&gt;
                                      date ? (
                                          &lt;div
                                              role="cell"
                                              key={index}
                                              onClick={() =&gt; handleClick(date)}
                                              className={dayClass(date)}
                                          &gt;
                                              {date.getDate()}
                                          &lt;/div&gt;
                                      ) : (
                                          &lt;div
                                              key={index}
                                              className="DatePicker__day--empty"
                                          /&gt;
                                      ),
                                  )}
                              &lt;/div&gt;
                          ))}
                      &lt;/div&gt;
                  &lt;/OutsideClickHandler&gt;
              )}
          &lt;/div&gt;
      );
  };
  
  export default DatePicker;
  </code></pre>
  
  <p>DateRangePicker which uses two.</p>
  
  <pre><code>import React, { useState } from 'react';
  import DatePicker from './DatePicker';
  import DatePickerContext from './DatePickerContext';
  import './DatePicker.scss';
  
  const DateRangePicker = () =&gt; {
      const startDay = new Date().setHours(0, 0, 0, 0);
  
      const [isOpen, setIsOpen] = useState(false);
      const [isSecondOpen, setIsSecondOpen] = useState(false);
      const [selected, setSelected] = useState(new Date(startDay));
      const [secondSelected, setSecondSelected] = useState(new Date(startDay));
  
      function dayClass(date) {
          if (
              selected.getTime() === date.getTime() ||
              (date &gt;= selected &amp;&amp; date &lt;= secondSelected)
          ) {
              return 'DatePicker__day DatePicker__day--selected';
          }
          if (date &lt; startDay || date &lt; selected) {
              return 'DatePicker__day DatePicker__day--disabled';
          }
          return 'DatePicker__day';
      }
  
      function dayClick(date) {
          setSecondSelected(date);
          setIsSecondOpen(true);
      }
  
      return (
          &lt;DatePickerContext.Provider&gt;
              &lt;div className="DatePicker-wrapper"&gt;
                  &lt;DatePicker
                      key={1}
                      isOpen={isOpen}
                      setIsOpen={setIsOpen}
                      selected={selected}
                      setSelected={setSelected}
                      dayClick={dayClick}
                      dayClass={dayClass}
                  /&gt;
                  &lt;DatePicker
                      key={2}
                      isOpen={isSecondOpen}
                      setIsOpen={setIsSecondOpen}
                      selected={secondSelected}
                      setSelected={setSecondSelected}
                      dayClass={dayClass}
                  /&gt;
              &lt;/div&gt;
          &lt;/DatePickerContext.Provider&gt;
      );
  };
  
  export default DateRangePicker;
  </code></pre>