build(deps): update latest

components/Header/Language/Language.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
 import classNames from 'classnames'
@@ -15,31 +15,37 @@ export const Language: React.FC<LanguageProps> = (props) => {
   const { className } = props
   const { lang: currentLanguage } = useTranslation()
   const [hiddenMenu, setHiddenMenu] = useState(true)
+  const languageClickRef = useRef<HTMLDivElement | null>(null)
 
   const handleHiddenMenu = useCallback(() => {
-    setHiddenMenu(!hiddenMenu)
-  }, [hiddenMenu])
+    setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
+  }, [])
 
   useEffect(() => {
-    if (!hiddenMenu) {
-      window.document.addEventListener('click', handleHiddenMenu)
-    } else {
-      window.document.removeEventListener('click', handleHiddenMenu)
+    const handleClickEvent = (event: MouseEvent): void => {
+      if (languageClickRef.current == null || event.target == null) {
+        return
+      }
+      if (!languageClickRef.current.contains(event.target as Node)) {
+        setHiddenMenu(true)
+      }
     }
 
+    window.document.addEventListener('click', handleClickEvent)
+
     return () => {
-      window.document.removeEventListener('click', handleHiddenMenu)
+      return window.removeEventListener('click', handleClickEvent)
     }
-  }, [hiddenMenu, handleHiddenMenu])
+  }, [])
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
-    handleHiddenMenu()
   }
 
   return (
     <div className='relative flex cursor-pointer flex-col items-center justify-center'>
       <div
+        ref={languageClickRef}
         data-cy='language-click'
         className='mr-5 flex items-center'
         onClick={handleHiddenMenu}