fix: lint

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) => (