refactor: replace Select hook logic with ref-function

components/TempDesignSystem/Form/Select/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { RefObject, useEffect, useRef, useState } from "react"
+import { useState } from "react"
 import {
   Button,
   type Key,
@@ -15,7 +15,7 @@ import SelectChevron from "../SelectChevron"
 
 import styles from "./select.module.css"
 
-import type { SelectProps } from "./select"
+import type { SelectPortalContainer, SelectProps } from "./select"
 
 export default function Select({
   "aria-label": ariaLabel,
@@ -26,18 +26,20 @@ export default function Select({
   value,
   defaultSelectedKey,
 }: SelectProps) {
-  const ref = useRef<HTMLDivElement>(null)
+  const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(null)
-  const [rootDiv, setRootDiv] = useState<HTMLDivElement | null>(null)
+
-  useEffect(() => {
+  function setRef(node: SelectPortalContainer) {
-    setRootDiv(ref.current)
+    if (node) {
-  }, [setRootDiv])
+      setRootDiv(node)
+    }
+  }
 
   function handleOnSelect(key: Key) {
     onSelect(key)
   }
 
   return (
-    <div className={styles.container} ref={ref}>
+    <div className={styles.container} ref={setRef}>
       <ReactAriaSelect
         defaultSelectedKey={defaultSelectedKey}
         aria-label={ariaLabel}

components/TempDesignSystem/Form/Select/select.ts

@@ -9,3 +9,5 @@ export interface SelectProps
   placeholder?: string
   defaultSelectedKey?: Key
 }
+
+export type SelectPortalContainer = HTMLDivElement | null