Dropdown toggle is set to off when an select all option is clicked inside

As mentioned in the title, my drop down button renders a list of option that stays open when any of the options are clicked. Recently I added a select all option which now selects all the options available in the drop down button but now also toggles close for the option menu itself. I think it has to with the

  const handleClickOutside = e => {
    e.stopPropagation();
    if (!dropdownRef?.current?.contains(e.target)) setIsOpen(false);
  };

as if I comment out the if statement, the drop down menu stays open after clicking select all though I don't know why. Is it considering the fact that the menu disappears to be outside the drop down menu?

export const DropdownButton = ({ handleOnClick, count = '' }) => {
  return (
    <div className={styles.button} role="button" onClick={handleOnClick}>
      <div className={styles.buttonInner}>
        <span>
          <i className="material-icons icon-layers" />
        </span>
        <p>{count}</p>
      </div>
    </div>
  );
};

DropdownButton.propTypes = {
  handleOnClick: PropTypes.func.isRequired,
  count: PropTypes.string,
};

/**
 *
 * @param data {Array}
 * @param handleCheckboxOnChange {Function}
 * @param handleSetThisGroupOnly {Function}
 * @param handleSetLocalStorage
 * @param showRememberFilterButton
 * @returns {*}
 * @constructor
 */
const GroupQuickFilter = ({
  data = [],
  handleCheckboxOnChange,
  handleSetThisGroupOnly,
  handleSetLocalStorage,
  showRememberFilterButton,
  allSelected,
}) => {
  const dropdownRef = useRef(null);

  const [isOpen, setIsOpen] = useState(false);
  const [count, setCount] = useState('');
  const [isOnlyOneLeft, setIsOnlyOneLeft] = useState(false);

  // handles calculating count
  useEffect(() => {
    const total = data.length;
    const enabled = data.filter(d => d.enabled).length;

    if (enabled === 1) setIsOnlyOneLeft(true);
    else if (enabled > 1) setIsOnlyOneLeft(false);

    if (total) setCount(`${enabled} / ${total}`);
  }, [data]);

  // handles auto-closing
  useEffect(() => {
    window.addEventListener('click', handleClickOutside);
    return () => {
      window.removeEventListener('click', handleClickOutside);
    };
  }, []);

  const handleClickOutside = e => {
    e.stopPropagation();
    if (!dropdownRef?.current?.contains(e.target)) setIsOpen(false);
  };

  const toggleDropdown = e => {
    e.stopPropagation();
    setIsOpen(!isOpen);
  };

  //const open = () => {setIsOpen(isOpen)};
  
  // const checkChange = () => handleCheckboxOnChange('checkall');
  // const setDropOpenChange = (e) => toggleDropdown(e);

  // const changeFunction = (e) => {
  //   checkChange();
  //   setDropOpenChange(e);
  // }

  const enabledOptions = data.filter(group => group.enabled);

  return (
    <div className={styles.wrapper} ref={dropdownRef}>
      <DropdownButton handleOnClick={(e) => toggleDropdown(e)} count={count} />
      <ul className={styles.dropdownRow}>
        <div
          className={
            showRememberFilterButton ? styles.rememberFiltersOpen : null
          }
        >
          <AnimateHeight height={isOpen ? 'auto' : 0} duration={250}>
            <div className={styles.checkboxWrapper}>
              {(enabledOptions.length === data.length) ? null : (
                <Checkbox
                  color="primaryLight"
                  onChange={(isOpen) => handleCheckboxOnChange('checkall', setIsOpen(isOpen))}         
                  checked={allSelected}
                  label={<span className={styles.allSelected}>All Groups</span>}
                />
              )}
              {data.map(d => (
                <li key={d.id}>
                  <Checkbox
                    color="primaryLight"
                    onChange={() => handleCheckboxOnChange(d.id)}
                    checked={d.enabled || false}
                    disabled={d.enabled && isOnlyOneLeft}
                    label={
                      <span className={styles.checkboxLabel}>
                        {capitalizeFirstLetter(d.name)}
                      </span>
                    }
                  />

                  <span className={styles.spacer} />
                  <Anchor
                    tag="a"
                    role="button"
                    className={styles.thisGroupOnly}
                    onClick={() => handleSetThisGroupOnly(d.id)}
                  >
                    This Group Only
                  </Anchor>
                </li>
              ))}
            </div>
            {showRememberFilterButton && (
              <div className={styles.rememberContainer}>
                <span className={styles.border} />
                <div
                  className={styles.rememberButton}
                  role="button"
                  onClick={handleSetLocalStorage}
                >
                  Remember Groups Settings
                </div>
              </div>
            )}
          </AnimateHeight>
        </div>
      </ul>
    </div>
  );
};