Implement useClickOutside Hook

This challenge asks you to build a custom hook, useClickOutside, that helps manage user interactions within a component. This hook is invaluable for implementing common UI patterns like dropdown menus, modals, or tooltips, ensuring they behave intuitively by closing when the user clicks anywhere outside of them.

Problem Description

You need to create a reusable hook named useClickOutside. This hook will accept two arguments:

1. ref: A reference object pointing to a DOM element.
2. callback: A function that should be executed when a click occurs outside the element referenced by ref.

The hook should internally set up an event listener that monitors all clicks on the document. When a click event occurs, the hook must determine if the click target is outside the DOM element associated with the provided ref. If the click is indeed outside, the callback function should be invoked.

Key Requirements:

• The hook must correctly identify clicks that originate from outside the referenced element.
• The callback function should be executed only when a click is outside.
• The event listener should be properly attached and cleaned up when the component using the hook unmounts to prevent memory leaks.

Expected Behavior:

When a component uses useClickOutside, and the user clicks anywhere on the page:

• If the click lands inside the element managed by the ref, nothing should happen (the callback is not executed).
• If the click lands outside the element managed by the ref, the provided callback function will be executed.

Edge Cases to Consider:

• What happens if the ref is null or undefined when the hook is initialized?
• What happens if the callback is not a function?
• Clicks on the ref's immediate children should not trigger the callback.

Examples

Example 1:

Input:
ref = { current: <div id="my-element">...</div> }
callback = function() { console.log("Clicked outside!"); }

User clicks on an element outside of #my-element.

Output:
console.log("Clicked outside!");

Explanation: The click occurred outside the element referenced by ref, so the callback was executed.

Example 2:

Input:
ref = { current: <div id="my-element"><span>Click me inside</span></div> }
callback = function() { console.log("Clicked outside!"); }

User clicks on the `<span>` element.

Output:
(No console output from the callback)

Explanation: The click occurred on an element that is a descendant of the element referenced by ref. Therefore, it's considered an "inside" click, and the callback is not executed.

Example 3:

Input:
ref = { current: <div id="my-element">...</div> }
callback = function() { console.log("Clicked outside!"); }

User clicks on the #my-element itself.

Output:
(No console output from the callback)

Explanation: Clicking directly on the referenced element, or any of its descendants, is considered an "inside" click.

Constraints

• The ref will be a standard reference object (e.g., from React's useRef or a similar mechanism in other frameworks). It will have a current property that points to a DOM element or is null.
• The callback will be a function.
• The hook should ideally be efficient and not introduce significant performance overhead. The event listener should be attached only once and cleaned up.

Notes

• Consider how you will access the DOM element from the ref.
• Think about the event propagation model in DOM events to correctly distinguish between "inside" and "outside" clicks.
• Properly cleaning up event listeners is crucial for preventing memory leaks, especially in single-page applications. You'll likely need a mechanism to remove the listener when the component unmounts.