Added clickAwayHandler + POST functionality + Bug fixed.

components/ClickAwayHandler.tsx

@@ -0,0 +1,35 @@
+import React, { useRef, useEffect, ReactNode, RefObject } from "react";
+
+interface Props {
+  children: ReactNode;
+  onClickOutside: Function;
+}
+
+function useOutsideAlerter(
+  ref: RefObject<HTMLElement>,
+  onClickOutside: Function
+) {
+  useEffect(() => {
+    function handleClickOutside(event: Event) {
+      if (
+        ref.current &&
+        !ref.current.contains(event.target as HTMLInputElement)
+      ) {
+        onClickOutside();
+      }
+    }
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, onClickOutside]);
+}
+
+export default function OutsideAlerter({ children, onClickOutside }: Props) {
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef, onClickOutside);
+
+  return <div ref={wrapperRef}>{children}</div>;
+}