correct the implementation of useMount

resources/assets/src/scripts/hooks/useMount.ts

@@ -1,16 +1,20 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useRef } from 'react'
 
-export default function useMount(selector: string): HTMLElement {
+export default function useMount(selector: string): HTMLElement | null {
-  const container = useMemo(() => document.createElement('div'), [])
+  const container = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
     const mount = document.querySelector(selector)!
-    mount.appendChild(container)
+    const div = document.createElement('div')
+    container.current = div
+
+    mount.appendChild(div)
 
     return () => {
-      mount.removeChild(container)
+      mount.removeChild(div)
+      container.current = null
     }
   }, [])
 
-  return container
+  return container.current
 }

resources/assets/src/views/skinlib/Show/index.tsx

@@ -238,7 +238,8 @@ const Show: React.FC = () => {
 
   return (
     <React.Fragment>
-      {createPortal(
+      {container &&
+        createPortal(
           <React.Suspense fallback={<ViewerSkeleton />}>
             <Previewer
               {...{

resources/assets/src/views/skinlib/Upload.tsx

@@ -233,7 +233,8 @@ const Upload: React.FC = () => {
           )}
         </div>
       </div>
-      {ReactDOM.createPortal(
+      {container &&
+        ReactDOM.createPortal(
           <React.Suspense fallback={<ViewerSkeleton />}>
             <Previewer
               skin={type !== TextureType.Cape ? texture : undefined}

resources/assets/src/views/user/Closet/Previewer.tsx

@@ -17,7 +17,9 @@ const Previewer: React.FC<Props> = (props) => {
   const skin = props.skin ? `${blessing.base_url}/textures/${props.skin}` : ''
   const cape = props.cape ? `${blessing.base_url}/textures/${props.cape}` : ''
 
-  return ReactDOM.createPortal(
+  return (
+    container &&
+    ReactDOM.createPortal(
       <React.Suspense fallback={<ViewerSkeleton />}>
         <Viewer skin={skin} cape={cape} isAlex={props.isAlex} showIndicator>
           {props.children}
@@ -25,6 +27,7 @@ const Previewer: React.FC<Props> = (props) => {
       </React.Suspense>,
       container,
     )
+  )
 }
 
 export default Previewer

resources/assets/src/views/user/Players/Previewer.tsx

@@ -28,7 +28,9 @@ const Previewer: React.FC<Props> = (props) => {
 
   const { skin, cape, isAlex } = props
 
-  return ReactDOM.createPortal(
+  return (
+    container &&
+    ReactDOM.createPortal(
       is3d ? (
         <React.Suspense fallback={<ViewerSkeleton />}>
           <Viewer3d skin={skin} cape={cape} isAlex={isAlex}>
@@ -42,6 +44,7 @@ const Previewer: React.FC<Props> = (props) => {
       ),
       container,
     )
+  )
 }
 
 export default Previewer