How to use the useClickOutside hook properly | Mantine | Page 1

In the documentation (https://mantine.dev/hooks/use-click-outside/#typescript) there's an example under "Multiple Nodes", that looks like this:

function Demo() {
  const [dropdown, setDropdown] = useState(null);
  const [control, setControl] = useState(null);

  useClickOutside(() => console.log('outside'), null, [control, dropdown]);

  return (
    // We cannot use root element ref as it does not contain dropdown
    <div>
      <div ref={setControl}>Control</div>
      <Portal>
        <div ref={setDropdown}>Dropdown</div>
      </Portal>
    </div>
  );
}

The hook has a type definition that seems not to correspond with the example above. The third argument nodes should be an array of HTMLElement, but here you seem to pass in the boolean returned from useState. Furthermore it seems the Dispatch function (setState) is used as a ref?

Could someone explain what's going on here?

My problem is that I'm using this on a dropdown, and I don't want the clickOutside hook to fire when I click the dropdown itself (which fires an open/close trigger function). So I don't know how to pass in this element. I tried to pass a ref (useRef) to the div, but it want's a HTMLElement.

#How to use the useClickOutside hook properly