Improve navbar menu

src/components/Menu/index.tsx

@@ -15,45 +15,38 @@ type MenuProps = {
 
 const Menu = ({ items, component, className }: MenuProps) => {
   const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+  const componentRef = useRef<HTMLDivElement>(null);
-
+  const parentComponentRef = useRef<HTMLDivElement>();
-  useEffect(() => {
-    const wrapper = ref.current;
 
   const openMenu = () => setOpen(true);
   const closeMenu = () => setOpen(false);
 
-    (document.querySelector(`#${component}`) as HTMLElement)?.addEventListener(
+  useEffect(() => {
-      'mouseenter',
+    parentComponentRef.current = document.querySelector(`#${component}`) as HTMLDivElement;
-      openMenu
+
-    );
+    parentComponentRef.current?.addEventListener('mouseenter', openMenu);
-    ref.current?.addEventListener('mouseleave', closeMenu);
+    componentRef.current?.addEventListener('mouseleave', closeMenu);
 
     return () => {
-      (
+      parentComponentRef.current?.removeEventListener('mouseenter', openMenu);
-        document.querySelector(`#${component}`) as HTMLElement
+      componentRef.current?.removeEventListener('mouseleave', closeMenu);
-      )?.removeEventListener('mouseenter', openMenu);
-      wrapper?.addEventListener('mouseleave', closeMenu);
     };
-
+  }, []);
-    // eslint-disable-next-line
-  }, [ref.current]);
 
   return (
     <Wrapper
-      ref={ref}
+      ref={componentRef}
       className={className}
       top={
-        (document.querySelector(`#${component}`) as HTMLElement)?.offsetTop + 30
+        (parentComponentRef.current as HTMLDivElement)?.getBoundingClientRect().top + 30
       }
       left={
-        (document.querySelector(`#${component}`) as HTMLElement)?.offsetLeft
+        (parentComponentRef.current as HTMLDivElement)?.getBoundingClientRect()?.left
       }
     >
       {open && (
         <ul>
           {items.map(({ icon, label, avoid, action }) => (
-            // eslint-disable-next-line
             <li
               onClick={() => {
                 if (action) {