fix: useCallback for modal element to avoid element not found

src/components/common/CharacterList.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "next-i18next"
-import React, { useRef } from "react"
+import React, { useCallback, useState } from "react"
 import { Virtuoso } from "react-virtuoso"
 
 import { Modal } from "~/components/ui/Modal"
@@ -24,7 +24,13 @@ export const CharacterList: React.FC<{
     [] as any[],
   ) as any[]
 
-  const $modalEl = useRef<HTMLDivElement>(null)
+  const [modal, setModal] = useState<HTMLDivElement>()
+
+  const modalEl = useCallback((node: HTMLDivElement) => {
+    if (node !== null) {
+      setModal(node)
+    }
+  }, [])
 
   return (
     <Modal
@@ -32,10 +38,10 @@ export const CharacterList: React.FC<{
       setOpen={setOpen}
       title={title}
       zIndex={20}
-      ref={$modalEl}
+      ref={modalEl}
     >
       {list?.length ? (
-        <PortalProvider to={$modalEl.current!}>
+        <PortalProvider to={modal}>
           <Virtuoso
             overscan={10}
             style={{ height: flattenList.length * 64 }}

src/components/common/FollowingCount.tsx

@@ -55,7 +55,7 @@ export const FollowingCount: React.FC<{
         <CharacterList
           open={isFollowListOpen}
           setOpen={setIsFollowListOpen}
-          title="Follow List"
+          title={t("Followers")}
           loadMore={subscriptions.fetchNextPage}
           hasMore={!!subscriptions.hasNextPage}
           list={subscriptions.data?.pages}
@@ -65,7 +65,7 @@ export const FollowingCount: React.FC<{
         <CharacterList
           open={isToFollowListOpen}
           setOpen={setIsToFollowListOpen}
-          title="Follow List"
+          title={t("Followings")}
           loadMore={toSubscriptions.fetchNextPage}
           hasMore={!!toSubscriptions.hasNextPage}
           list={toSubscriptions.data?.pages}

src/components/common/Portal.tsx

@@ -19,7 +19,7 @@ const RootPortalContext = createContext<{
 })
 export const PortalProvider = (
   props: PropsWithChildren<{
-    to: HTMLElement
+    to?: HTMLElement
   }>,
 ) => (
   <RootPortalContext.Provider

src/components/ui/Modal.tsx

@@ -21,7 +21,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       <Dialog
         open={open}
         onClose={() => setOpen(false)}
-        className={clsx("relative", zIndex ? `z-${zIndex}` : "z-50")}
+        className={clsx("relative", zIndex ? `z-${zIndex}` : "z-10")}
       >
         {/* The backdrop, rendered as a fixed sibling to the panel container */}
         <div className="fixed inset-0 bg-black/30 z-40" aria-hidden={true} />