Wrap useSearchParams into Suspense

app/pwopose/page.js

@@ -1,6 +1,7 @@
 'use client'
 
-import {useState, useEffect, forwardRef} from 'react'
+import PropTypes from 'prop-types'
+import {useState, useEffect, forwardRef, Suspense} from 'react'
 import {useSession} from 'next-auth/react'
 import MuiAlert from '@mui/material/Alert'
 import Snackbar from '@mui/material/Snackbar'
@@ -19,9 +20,26 @@ const Alert = forwardRef(function Alert(props, ref) {
   return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
 })
 
-export default function Pwopose() {
+function HandleSession({session}) {
   const params = useSearchParams()
   const {code} = params
+
+  if (!session && !code) {
+    return (
+      <Koneksyon
+        chimen='/pwopose'
+      />
+    )
+  }
+
+  if (!session && code) {
+    return (
+      <NewPassword code={code} />
+    )
+  }
+}
+
+export default function Pwopose() {
   const {data: session} = useSession()
   const [localUsername, setLocalUsername] = useState(null)
   const [username, setUsername] = useState(null)
@@ -75,15 +93,10 @@ export default function Pwopose() {
   return (
     <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
       <Box sx={{flexGrow: 1, marginTop: 1, marginBottom: 10}}>
-        {!session && !code && (
+        <Suspense>
-          <Koneksyon
+          <HandleSession session={session} />
-            chimen='/pwopose'
+        </Suspense>
-          />
-        )}
 
-        {!session && code && (
-          <NewPassword code={code} />
-        )}
         {session && session.user && (
           <>
             <Dekoneksyon position='absolute' top={95} left={5} chimen='/pwopose' />
@@ -108,3 +121,7 @@ export default function Pwopose() {
     </Box>
   )
 }
+
+HandleSession.propTypes = {
+  session: PropTypes.object.isRequired
+}