fix: lint

components/MyProfile/Profile/Edit/Form/Content.tsx

@@ -27,7 +27,7 @@ export default function FormContent({ control }: EditFormContentProps) {
 
   useEffect(() => {
     setIsPending(pending)
-  }, [pending])
+  }, [pending, setIsPending])
 
   return (
     <>

components/TempDesignSystem/Form/Country/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { useController, useFormContext } from "react-hook-form"
-import { useEffect, useRef, useState } from "react"
+import { useRef } from "react"
 
 import { _ } from "@/lib/translation"
 import { countries } from "./countries"
@@ -28,7 +28,6 @@ export default function CountrySelect({
   registerOptions,
 }: CountryProps) {
   const divRef = useRef<HTMLDivElement>(null)
-  const [divElement, setDivElement] = useState(divRef.current)
   const { control, setValue } = useFormContext()
   const { field } = useController({
     control,
@@ -40,12 +39,6 @@ export default function CountrySelect({
     setValue(name, country)
   }
 
-  useEffect(() => {
-    if (divRef.current) {
-      setDivElement(divRef.current)
-    }
-  }, [divRef.current])
-
   return (
     <div className={styles.container} ref={divRef}>
       <ComboBox
@@ -81,7 +74,7 @@ export default function CountrySelect({
            * by this component to both access css variables assigned
            * on the container as well as to not overflow it at any time.
            */
-          UNSTABLE_portalContainer={divElement ?? undefined}
+          UNSTABLE_portalContainer={divRef.current ?? undefined}
         >
           <ListBox>
             {countries.map((country, idx) => (

components/TempDesignSystem/Form/Date/Select/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useRef, useState, type FocusEvent } from "react"
+import { useRef } from "react"
 
 import {
   Button,
@@ -27,18 +27,11 @@ export default function Select({
   value,
 }: SelectProps) {
   const divRef = useRef<HTMLDivElement>(null)
-  const [divElement, setDivElement] = useState(divRef.current)
 
   function handleOnSelect(key: Key) {
     onSelect(key, name)
   }
 
-  useEffect(() => {
-    if (divRef.current) {
-      setDivElement(divRef.current)
-    }
-  }, [divRef.current])
-
   return (
     <div className={styles.date} ref={divRef}>
       <ReactAriaSelect
@@ -63,7 +56,7 @@ export default function Select({
            * by this component to both access css variables assigned
            * on the container as well as to not overflow it at any time.
            */
-          UNSTABLE_portalContainer={divElement ?? undefined}
+          UNSTABLE_portalContainer={divRef.current ?? undefined}
         >
           <ListBox className={styles.listBox}>
             {items.map((item) => (

components/TempDesignSystem/Form/Phone/index.tsx

@@ -41,21 +41,18 @@ export default function Phone({
     rules: registerOptions,
   })
 
-  const handleCountrySelectForPhone = useCallback(
-    (country: string) => {
-      const selectedCountry = getCountry({
-        countries: defaultCountries,
-        field: "iso2",
-        value: country.toLowerCase(),
-      })
+  const handleCountrySelectForPhone = useCallback((country: string) => {
+    const selectedCountry = getCountry({
+      countries: defaultCountries,
+      field: "iso2",
+      value: country.toLowerCase(),
+    })
 
-      if (selectedCountry) {
-        phoneRef.current?.setCountry(selectedCountry.iso2)
-        prevSelectedCountry.current = country.toLowerCase()
-      }
-    },
-    [phoneRef.current, prevSelectedCountry.current]
-  )
+    if (selectedCountry) {
+      phoneRef.current?.setCountry(selectedCountry.iso2)
+      prevSelectedCountry.current = country.toLowerCase()
+    }
+  }, [])
 
   useEffect(() => {
     if (countryValue) {
@@ -80,7 +77,7 @@ export default function Phone({
         handleCountrySelectForPhone(countryValue)
       }
     }
-  }, [countryValue, prevSelectedCountry.current])
+  }, [countryValue, field.value, handleCountrySelectForPhone])
 
   return (
     <div className={styles.phone}>